How to build several markers, as well as build a route between two points?

Question

Is it possible to build several markers, as well as build a route between two points?

I managed to do it separately. But how can this be done on one map?

When I combine the two, the route is not built, however markers are drawn.

What has been done so far:

var directionsDisplay; var directionsService = new google.maps.DirectionsService(); var map; var locations = [ ['Bondi Beach', -33.890542, 151.274856, 4], ['Coogee Beach', -33.923036, 151.259052, 5], ['Cronulla Beach', -34.028249, 151.157507, 3], ['Manly Beach', -33.80010128657071, 151.28747820854187, 2], ['Maroubra Beach', -33.950198, 151.259302, 1] ]; var infowindow = new google.maps.InfoWindow(); var marker, i; 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 }); google.maps.event.addListener(marker, 'click', (function (marker, i) { return function () { infowindow.setContent(locations[i][0]); infowindow.open(map, marker); } })(marker, i)); } directionsDisplay = new google.maps.DirectionsRenderer(); directionsDisplay.setMap(map); var start = new google.maps.LatLng(-33.890542, 151.274856); var end = new google.maps.LatLng(-34.028249, 151.157507); var request = { origin: start, destination: end, travelMode: google.maps.DirectionsTravelMode.DRIVING }; directionsService.route(request, function (response, status) { if (status == google.maps.DirectionsStatus.OK) { directionsDisplay.setDirections(response); } }); map = new google.maps.Map(document.getElementById('map'), { zoom: 10, center: new google.maps.LatLng(-33.92, 151.25), mapTypeId: google.maps.MapTypeId.ROADMAP }); 

HTML:

  <div id="map-canvas"></div> 

Script:

  <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script> 

Answer 1

You need to initialize the map variable before using it for your markers and directions. If the div that you want to display in your map is called "map-canvas", you should use this name in the google.maps.Map constructor.

 var directionsDisplay; var directionsService = new google.maps.DirectionsService(); var map; var locations = [ ['Bondi Beach', -33.890542, 151.274856, 4], ['Coogee Beach', -33.923036, 151.259052, 5], ['Cronulla Beach', -34.028249, 151.157507, 3], ['Manly Beach', -33.80010128657071, 151.28747820854187, 2], ['Maroubra Beach', -33.950198, 151.259302, 1] ]; var infowindow = new google.maps.InfoWindow(); var marker, i; map = new google.maps.Map(document.getElementById('map-canvas'), { zoom: 10, center: new google.maps.LatLng(-33.92, 151.25), mapTypeId: google.maps.MapTypeId.ROADMAP }); 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 }); google.maps.event.addListener(marker, 'click', (function (marker, i) { return function () { infowindow.setContent(locations[i][0]); infowindow.open(map, marker); } })(marker, i)); } directionsDisplay = new google.maps.DirectionsRenderer(); directionsDisplay.setMap(map); var start = new google.maps.LatLng(-33.890542, 151.274856); var end = new google.maps.LatLng(-34.028249, 151.157507); var request = { origin: start, destination: end, travelMode: google.maps.DirectionsTravelMode.DRIVING }; directionsService.route(request, function (response, status) { if (status == google.maps.DirectionsStatus.OK) { directionsDisplay.setDirections(response); } }); 

You should probably also run the map code after the page has finished rendering.

working example