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.