Routes with A number of Stops Utilizing Google Maps JavaScript API

This tutorial helps to create Google map routes with a number of stops. Google Maps permits us to plan routes with a number of stops effectively from one location to a different location.

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

Google Maps a number of stops

I’ve already shared Google Maps Routes between two locations with PHP & JS. We’ll use the fundamental html construction from this text. Let’s add a number of stops between two places.

Create a Fundamental MAP

I’m assuming you might have the Google Maps API key. When you don’t have one, You’ll be able to acquire 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;

	operate initMap() {
		// Your map initialization code will go right here
		map = new google.maps.Map(doc.getElementById("map"), {
			heart: { 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>

Change YOUR_API_KEY along with your precise Google Maps API key. The above code units up the map centered round Denver with zoom stage of 12, DirectionsService and DirectionsRenderer to deal with route-related duties.

Including Waypoints

Let’s plan a route that features a number of waypoint(stops) at notable Denver places.

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

Every waypoint represents a novel location, from the Denver Artwork Museum to the colourful sixteenth Road Mall. We have now used stopover property, which signifies whether or not the route ought to cease at that waypoint.

Route Request

Create a request object to specify the origin, vacation spot, waypoints, and journey mode:

const request = {
    origin: waypoints[0].location,
    vacation spot: 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 possibility ensures an optimized order of waypoints for probably the most environment friendly route.

Making the Instructions Request

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

directionsService.route(request, operate(response, standing) {
    if (standing === google.maps.DirectionsStatus.OK) {
        // Show the route on the map
        directionsRenderer.setDirections(response);
    } else {
        console.error("Instructions request failed. Standing:", standing);
    }
});

Conclusion

We have now created routes with a number of stops utilizing the Google Maps JavaScript API. We will additional improve your map utilizing Google Maps API further options like customized markers, data home windows, and real-time site visitors updates.