i am pretty new to web development. In the above html file i am calling the google maps api and placing markers. My goal is to have shortest routes between the markers. With this html file i am getting the required points clearly marked on the google maps but not the paths between them. Please help.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>Reverse Geocoding</title>
<style>
/* Always set the map height explicitly to define the size of the div
* element that contains the map. */
#map {
height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html, body {
height: 100%;
margin: 0;
padding: 0;
}
#floating-panel {
position: absolute;
top: 10px;
left: 25%;
z-index: 5;
background-color: #fff;
padding: 5px;
border: 1px solid #999;
text-align: center;
font-family: 'Roboto','sans-serif';
line-height: 30px;
padding-left: 10px;
}
#floating-panel {
position: absolute;
top: 5px;
left: 50%;
margin-left: -180px;
width: 350px;
z-index: 5;
background-color: #fff;
padding: 5px;
border: 1px solid #999;
}
#latlng {
width: 225px;
}
</style>
</head>
<body>
<div id="map"></div>
<script>
var map;
var geocoder;
function initMap() {
var directionsService = new google.maps.DirectionsService;
var directionsDisplay = new google.maps.DirectionsRenderer;
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 8,
center: {lat: -33.931, lng: 151.257},
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var marker, i;
var locations = [
['Manly Beach', -32.80010128657071, 151.28747820854187, 2],
['Bondi Beach', -33.890542, 151.274856, 4],
['Coogee Beach', -33.923036, 151.259052, 5],
['Maroubra Beach', -33.950198, 151.259302, 1],
['Cronulla Beach', -34.028249, 151.157507, 3],
['Canly Beach', -33.90010128657071, 151.28747820854187, 6],
['Pukuni', -32.90010128657071, 151.28747820854187, 7],
['Chulkuni Beach', -31.90010128657071, 151.28747820854187, 8],
['Narumi', -30.90010128657071, 151.28747820854187, 9],
];
var request = {
travelMode: google.maps.TravelMode.DRIVING
};
for (i = 0; i < locations.length; i++) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[i][1], locations[i][2]),
map: map
});
//Shows marker names and related content
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infowindow.setContent(locations[i][0]);
infowindow.open(map, marker);
}
})(marker, i));
if (i == 0) request.origin = marker.getPosition();
else if (i == locations.length - 1) request.destination = marker.getPosition();
else {
if (!request.waypoints) request.waypoints = [];
request.waypoints.push({
location: marker.getPosition(),
stopover: true,
});
}
}
directionsService.route(request, function(result, status) {
if (status == google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(result);
}
});
}
google.maps.event.addDomListener(window, "load", initialize);
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=xxxx&callback=initMap">
</script>
</body>
</html>
I have specifically deleted the key.
You aren't setting the map
property of the DirectionsRenderer
.
Add:
directionsDisplay.setMap(map);
after the map
is created.
code snippet:
var map; var geocoder; function initMap() { var directionsService = new google.maps.DirectionsService(); var directionsDisplay = new google.maps.DirectionsRenderer(); var infowindow = new google.maps.InfoWindow(); var map = new google.maps.Map(document.getElementById('map'), { zoom: 8, center: { lat: -33.931, lng: 151.257 }, mapTypeId: google.maps.MapTypeId.ROADMAP }); directionsDisplay.setMap(map); // <=================== add this line var marker, i; var locations = [ ['Manly Beach', -32.80010128657071, 151.28747820854187, 2], ['Bondi Beach', -33.890542, 151.274856, 4], ['Coogee Beach', -33.923036, 151.259052, 5], ['Maroubra Beach', -33.950198, 151.259302, 1], ['Cronulla Beach', -34.028249, 151.157507, 3], ['Canly Beach', -33.90010128657071, 151.28747820854187, 6], ['Pukuni', -32.90010128657071, 151.28747820854187, 7], ['Chulkuni Beach', -31.90010128657071, 151.28747820854187, 8], ['Narumi', -30.90010128657071, 151.28747820854187, 9], ]; var request = { travelMode: google.maps.TravelMode.DRIVING }; for (i = 0; i < locations.length; i++) { marker = new google.maps.Marker({ position: new google.maps.LatLng(locations[i][1], locations[i][2]), map: map }); //Shows marker names and related content google.maps.event.addListener(marker, 'click', (function(marker, i) { return function() { infowindow.setContent(locations[i][0]); infowindow.open(map, marker); } })(marker, i)); if (i == 0) request.origin = marker.getPosition(); else if (i == locations.length - 1) request.destination = marker.getPosition(); else { if (!request.waypoints) request.waypoints = []; request.waypoints.push({ location: marker.getPosition(), stopover: true, }); } } directionsService.route(request, function(result, status) { if (status == google.maps.DirectionsStatus.OK) { directionsDisplay.setDirections(result); } }); }
#map { height: 100%; } html, body { height: 100%; margin: 0; padding: 0; } #floating-panel { position: absolute; top: 10px; left: 25%; z-index: 5; background-color: #fff; padding: 5px; border: 1px solid #999; text-align: center; font-family: 'Roboto', 'sans-serif'; line-height: 30px; padding-left: 10px; } #floating-panel { position: absolute; top: 5px; left: 50%; margin-left: -180px; width: 350px; z-index: 5; background-color: #fff; padding: 5px; border: 1px solid #999; } #latlng { width: 225px; }
<script async defer src="https://maps.googleapis.com/maps/api/js?callback=initMap"></script> <div id="map"></div>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.