Google Maps API: Directions with more than 25 points

by Arjan Haverkamp

HTML

<button onclick="">Google URLs</button>

<div id="map"></div>

<script async defer src="https://maps.googleapis.com/maps/api/js?callback=initMap"></script>

CSS

html, body {
    height: 100%;
    margin: 0;
    padding: 0;
}
#map {
    height: 100%;     
    width: 100%;
    height: 100%;
}

JavaScript

const maxPoints = 25;

const getGoogleMapUrls = waypoints => {
	const nrChunks = Math.ceil(waypoints.length / maxPoints);
	const chunks = [];
	const urls = [];

	for (let x = 0; x < nrChunks; x++) {
		const start = (x * maxPoints) - x, end = start + maxPoints;
		chunks.push(waypoints.slice(start, end))
	}

	for (let chunk of chunks) {
		let url = 'https://www.google.com/maps/dir';
		for (let coord of chunk) {
			url += '/' + coord.lat + ',' + coord.lng;
		}
		url += '/data=!3m1!4b1!4m4!4m3!2m1!1b1!3e0'; // Method: car, Avoid highways

		urls.push(url);
	}
	return urls;
}

function initMap() {
    var service = new google.maps.DirectionsService;
    var map = new google.maps.Map(document.getElementById('map'), {streetViewControl: false});

    // list of points
    var stations =...