I developed an html but problem encounter to make it work, in my logic everything is fine but it does not run correctly.
What am I missing?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//PT" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Roteirizador Matteusin</title>
</head>
<body>
<div id="dvMapa" style="height: 600px; width: 80%;"> </div>
<script type="text/javascript">
var directionsService = new google.maps.DirectionsService();
var _mapPoints = new Array();
var _directionsRenderer = '';
var zoom_option = 6;
var LegPoints = new Array();
var map;
function InitializeMap() {
_directionsRenderer = new google.maps.DirectionsRenderer();
var myOptions = {
zoom: zoom_option,
zoomControl: true,
disableDoubleClickZoom: true,
streetViewControl: false,
center: new google.maps.LatLng(-8.598882, -55.641439),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("dvMapa"), myOptions);
_directionsRenderer.setMap(map);
_directionsRenderer.setOptions({ draggable: true });
google.maps.event.addListener(_directionsRenderer, 'directions_changed', function() {
var myroute = _directionsRenderer.directions.routes[0];
CreateRoute(myroute);
zoom_option = map.getZoom();
});
drawRoute();
}
function CreateRoute(myroute) {
var index = 0;
if (_mapPoints.length > 10)
{
index = _mapPoints.length - 10;
}
for (var i = 0; i < myroute.legs.length; i++) {
saveLegPoints(myroute.legs[i], index);
index = index + 1;
}
}
function saveLegPoints(leg, index) {
var points = new Array();
for (var i = 0; i < leg.steps.length; i++) {
for (var j = 0; j < leg.steps[i].lat_lngs.length; j++) {
points.push(leg.steps[i].lat_lngs[j]);
}
}
LegPoints[index] = points;
}
function drawPreviousRoute(Legs) {
var segPointValue = new Array();
for (var i = 0; i < Legs; i++) {
var innerArry = LegPoints[i];
for (var j = 0; j < innerArry.length; j++) {
segPointValue.push(innerArry[j]);
}
//addPreviousMarker(innerArry[0]);
}
var polyOptions = {
path: segPointValue,
strokeColor: '#F75C54',
strokeWeight: 3
};
var poly = new google.maps.Polyline(polyOptions);
poly.setMap(map);
}
function addPreviousMarker(myLatlng) {
var marker = new google.maps.Marker({
position: myLatlng,
icon: "Images/red-circle.png",
title: ""
});
marker.setMap(map);
}
function getRoutePointsAndWaypoints(Points) {
if (Points.length <= 10) {
drawRoutePointsAndWaypoints(Points);
}
else {
var newPoints = new Array();
var startPoint = Points.length - 10;
var Legs = Points.length - 10;
for (var i = startPoint; i < Points.length; i++) {
newPoints.push(Points[i]);
}
drawRoutePointsAndWaypoints(newPoints);
drawPreviousRoute(Legs);
}
}
function drawRoutePointsAndWaypoints(Points) {
var _waypoints = new Array();
if (Points.length > 2)
{
for (var j = 1; j < Points.length - 1; j++) {
var address = Points[j];
if (address !== "") {
_waypoints.push({
location: address,
stopover: true
});
}
}
drawRoute(Points[0], Points[Points.length - 1], _waypoints);
} else if (Points.length > 1) {
drawRoute(Points[_mapPoints.length - 2], Points[Points.length - 1], _waypoints);
} else {
drawRoute(Points[_mapPoints.length - 1], Points[Points.length - 1], _waypoints);
}
}
function drawRoute() {
var _request = '';
_request = {
origin: 'Rua das Bananeiras, Pq. Santana - Santana de Parnaiba',
destination: 'Peixes, Parque Santana - SP',
waypoints: [{location: 'Rua Virgem, Parque Santana - SP'}, {location: 'Rua Touro, Parque Santana - SP'}],
optimizeWaypoints: true,
travelMode: google.maps.DirectionsTravelMode.DRIVING
};
directionsService.route(_request, function(_response, _status) {
if (_status == google.maps.DirectionsStatus.OK) {
_directionsRenderer.setDirections(_response);
}
});
}
</script>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?signed_in=false&callback=InitializeMap" async defer></script>
</body>
</html>