Question

68

How to make route direction between multiple markers

rated 0 times [ 69] [ 1] / answers: 1 / hits: 31094 / 8 Years ago, sat, april 9, 2016, 12:00:00

How to make route direction between Manly Beach -> Bondi Beach -> Coogee Beach -> Maroubra Beach -> Cronulla Beach and finally go from Cronulla Beach to Manly Beach

<!DOCTYPE html>

<html> 

<head> 

  <meta http-equiv=content-type content=text/html; charset=UTF-8 /> 

  <title>Google Maps Multiple Markers</title> 

  <script src=http://maps.google.com/maps/api/js?sensor=false 

          type=text/javascript></script>

</head> 

<body>

  <div id=map style=width: 500px; height: 400px;></div>



  <script type=text/javascript>

    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 map = new google.maps.Map(document.getElementById('map'), {

      zoom: 10,

      center: new google.maps.LatLng(-33.92, 151.25),

      mapTypeId: google.maps.MapTypeId.ROADMAP

    });



    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));

    }

  </script>

</body>

</html>

CodePen: http://codepen.io/anon/pen/VaQwqK

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

kevonmoisesf

Add To Favorites

Follow

Total Points: 693

Total Questions: 101

Total Answers: 128

Location: Reunion

Member since Mon, Dec 28, 2020

4 Years ago

kevonmoisesf questions

1 Bootstrap 5 update Tooltip Title with Javascript

Sat, Jan 23, 21, 00:00, 3 Years ago

1 How to wait for reaction and only then send message [discord.js]

Thu, Aug 13, 20, 00:00, 4 Years ago

1 How do you display content of a .JSON file using Discord.js?

Tue, Feb 18, 20, 00:00, 4 Years ago

1 Flatpickr : set default date only if date value is null/empty

Tue, Nov 5, 19, 00:00, 5 Years ago

1 VueJs object key/value is not reactive in v-for loop

Wed, Jun 12, 19, 00:00, 5 Years ago

View All

answered 8 Years ago pierceabnerc · Accepted Answer

related questions:

Google map waypoints from geoJSON

Google Maps Api - drawing routes from an array of points

put the locations array in the order you want to get the directions in.

var locations = [

    ['Manly Beach', -33.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]

  ];

create the request for the DirectionsService with the first marker in origin the last marker in destination, push the rest into the waypoints array:

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

  });

}

call the directions service.

directionsService.route(request, function(result, status) {

  if (status == google.maps.DirectionsStatus.OK) {

    directionsDisplay.setDirections(result);

  }

});

proof of concept fiddle

code snippet:

var geocoder;

var map;

var directionsDisplay;

var directionsService = new google.maps.DirectionsService();

var locations = [

  ['Manly Beach', -33.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]

];



function initialize() {

  directionsDisplay = new google.maps.DirectionsRenderer();





  var map = new google.maps.Map(document.getElementById('map'), {

    zoom: 10,

    center: new google.maps.LatLng(-33.92, 151.25),

    mapTypeId: google.maps.MapTypeId.ROADMAP

  });

  directionsDisplay.setMap(map);

  var infowindow = new google.maps.InfoWindow();



  var marker, i;

  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]),

    });



    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);

html,

body,

#map {

  height: 100%;

  width: 100%;

  margin: 0px;

  padding: 0px

}

<script src=https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk></script>

<div id=map></div>