CODEWITHSUNDEEP
javascriptjqueryhtmlgoogle-mapsgoogle-api
Shiladitya Biswas
Shiladitya Biswas

Reputation: 51

Unable to draw routes between markers in google maps api

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.

Upvotes: 1

Views: 1958

Answers (1)

geocodezip
geocodezip

Reputation: 161334

You aren't setting the map property of the DirectionsRenderer.

Add:

directionsDisplay.setMap(map);

after the map is created.

proof of concept fiddle

screenshot of resulting map

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>

Upvotes: 2

Related Questions