Routes with Multiple Stops Using Google Maps JavaScript API

This tutorial helps to create Google map routes with multiple stops. Google Maps allows us to plan routes with multiple stops efficiently from one location to another location.

We’ll use Google Maps JavaScript API to create maps with multiple stops, optimizing the route for a seamless journey.

Google Maps multiple stops

I have already shared Google Maps Routes between two places with PHP & JS. We’ll use the basic html structure from this article. Let’s add multiple stops between two locations.

Create a Basic MAP

I am assuming you have the Google Maps API key. If you don’t have one, You can obtain it by following the official documentation.

<script defer src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap"></script>
<div id="map"></div>

<script>
 let map;
 let directionsService;
 let directionsRenderer;

 function initMap() {
  // Your map initialization code will go here
  map = new google.maps.Map(document.getElementById("map"), {
   center: { lat: 39.7392, lng: -104.9903 }, // Denver's coordinates
   zoom: 12,
  });

  directionsService = new google.maps.DirectionsService();
  directionsRenderer = new google.maps.DirectionsRenderer();
  directionsRenderer.setMap(map);
 }
</script>

Replace YOUR_API_KEY with your actual Google Maps API key. The above code sets up the map centered around Denver with zoom level of 12, DirectionsService and DirectionsRenderer to handle route-related tasks.

Adding Waypoints

Let’s plan a route that includes several waypoint(stops) at notable Denver locations.

const waypoints = [
    { location: new google.maps.LatLng(39.7392, -104.9903), stopover: true }, // Denver Art Museum
    { location: new google.maps.LatLng(39.7479, -104.9994), stopover: true }, // Civic Center Park
    { location: new google.maps.LatLng(39.7398, -104.9892), stopover: true }, // 16th Street Mall
    { location: new google.maps.LatLng(39.7394, -104.9849), stopover: true }, // Union Station
];

Each waypoint represents a unique location, from the Denver Art Museum to the vibrant 16th Street Mall. We have used stopover property, which indicates whether the route should stop at that waypoint.

Route Request

Create a request object to specify the origin, destination, waypoints, and travel mode:

const request = {
    origin: waypoints[0].location,
    destination: waypoints[waypoints.length - 1].location,
    waypoints: waypoints.slice(1, -1),
    optimizeWaypoints: true, // Optimize the order of waypoints
    travelMode: google.maps.TravelMode.DRIVING,
};

The optimizeWaypoints: true option ensures an optimized order of waypoints for the most efficient route.

Making the Directions Request

Now, send the above request object to the DirectionsService and render the route on the map:

directionsService.route(request, function(response, status) {
    if (status === google.maps.DirectionsStatus.OK) {
        // Display the route on the map
        directionsRenderer.setDirections(response);
    } else {
        console.error("Directions request failed. Status:", status);
    }
});

Conclusion

We have created routes with multiple stops using the Google Maps JavaScript API. We can further enhance your map using Google Maps API extra features like custom markers, info windows, and real-time traffic updates.