Google Maps Waypoints Not Showing Whole Path
I am drawing a simple route from a source to destination using Google Maps V3 Directions Service. I need to add some locations(midpoints or waypoints) that the route has to pass th
Solution 1:
A polylineOptions anonymous object is not (and shouldn't be) a google.maps.Polyline.
var polylineProps = new google.maps.Polyline({
strokeColor : '#009933',
strokeOpacity : 1.0,
strokeWeight : 3
});
Should be:
varpolylineProps= {
strokeColor :'#009933',
strokeOpacity :1.0,
strokeWeight :3
};
If I fix that that, the line appears for the complete route:
code snippet:
var map;
var wyPts = [];
functionaddWayPoints(location) {
wyPts.push({
location: location,
stopover: true
});
}
functioncreateInfoWindowContent(latLng, contentStr) {
var content = '<p><b>' + contentStr + ' </b> </p>' + 'LatLng: ' + latLng;
return content;
}
functiondisplayRoute(origin, destination, service, display) {
service.route({
origin: origin,
destination: destination,
//waypoints: [{location: new google.maps.LatLng(30.439025, -97.685654)}, {location: new google.maps.LatLng(30.434882, -97.677015)} , {location:new google.maps.LatLng(30.429495, -97.675274)}],waypoints: wyPts,
optimizeWaypoints: true,
travelMode: google.maps.DirectionsTravelMode.DRIVING
}, function(response, status) {
if (status === google.maps.DirectionsStatus.OK) {
display.setDirections(response);
} else {
alert('Could not display directions due to: ' + status);
}
});
}
functioninitMap() {
//////////source destination and middle waypointsvar src = new google.maps.LatLng(30.444719, -97.686202); // //school//addWayPoints(src);var midPt1 = new google.maps.LatLng(30.439025, -97.685654); // addWayPoints(midPt1);
var midPt2 = new google.maps.LatLng(30.434882, -97.677015); // addWayPoints(midPt2);
var midPt3 = new google.maps.LatLng(30.429495, -97.675274); // addWayPoints(midPt3);
/* for (var i = 0; i < wyPts.length; i++) {
alert("pts are : " + wyPts[i].location);
} */var destination = new google.maps.LatLng(30.401820, -97.669545); /////////////draw the map
map = new google.maps.Map(document.getElementById('map'), {
center: src,
mapTypeControlOptions: {
style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR,
position: google.maps.ControlPosition.TOP_RIGHT,
mapTypeIds: [google.maps.MapTypeId.ROADMAP,
google.maps.MapTypeId.TERRAIN,
google.maps.MapTypeId.HYBRID
]
},
zoomControl: true,
zoomControlOptions: {
position: google.maps.ControlPosition.RIGHT_CENTER
},
zoom: 14
});
//draw infowindow at src and destinationvar coordInfoWindowSrc = new google.maps.InfoWindow({
content: createInfoWindowContent(src, "Source"),
maxWidth: 180
});
coordInfoWindowSrc.setPosition(src);
coordInfoWindowSrc.open(map);
var coordInfoWindowDest = new google.maps.InfoWindow({
content: createInfoWindowContent(destination, "Destination"),
maxWidth: 180
});
coordInfoWindowDest.setPosition(destination);
coordInfoWindowDest.open(map);
//display routevar polylineProps = {
strokeColor: '#009933',
strokeOpacity: 1.0,
strokeWeight: 3
};
var directionsDisplay = new google.maps.DirectionsRenderer({
draggable: false, //do not make the route draggablemap: map,
suppressMarkers: true,
polylineOptions: polylineProps
});
var directionsService = new google.maps.DirectionsService();
displayRoute(src, destination, directionsService, directionsDisplay);
//add listener to map
directionsDisplay.addListener(
'change',
function() {
displayRoute(src, destination, directionsService,
directionsDisplay);
});
}
google.maps.event.addDomListener(window, 'load', initMap);
html,
body,
#map {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px
}
<scriptsrc="https://maps.googleapis.com/maps/api/js"></script><divid="map"></div>
related question: Google Map API V3. Unable to create custom polyline for TRANSIT directions
Post a Comment for "Google Maps Waypoints Not Showing Whole Path"