Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>You need to initialize the map variable before you use it for your markers and directions. If the div you want your map to appear in is named "map-canvas", you should use that name in the google.maps.Map constructor.</p> <pre><code>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 &lt; 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); } }); </code></pre> <p>You probably should also run the map code after the page has finished rendering.</p> <p><a href="http://www.geocodezip.com/v3_SO_simpleMap_markerAndDirections.html" rel="noreferrer">working example</a></p>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. VO
      singulars
      1. This table or related slice is empty.
    2. VO
      singulars
      1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload