How to build a route with the Google Maps API?

Good,

You can use the Google Maps API service, called Directions , where you can indicate a point (already start by name or by coordinate) and a final point.

  

Edit: 29 points for 23 waypoints and indicate the number of points available for the free version of the service

If you want to indicate that among those points you can respect some intermediate ones, you can use waypoints , where you have up to 23 points available for the paid version and 8 for the free version, to add to the route, and what this service will do is move through the indicated points until reaching the final point.

Here is an example from the same page of the Google Maps API, where is what I indicate.

link

Greetings,

Complementing the information of jolsalazar I leave you a simpler example than that of the Google documentation

function initdMap() {
        //get api uses
        var directionsService = new google.maps.DirectionsService;
        var directionsDisplay = new google.maps.DirectionsRenderer;
        //waypoints to add
        var waypts = [{ location: { lat: 41.94, lng: 1.56 }, stopover: true }, { location: { lat: 41.99, lng: 1.53 }, stopover: true }, { location: { lat: 41.98, lng: 1.52 }, stopover: true }];

        //api map
        var map = new google.maps.Map(document.getElementById('map'), {
            zoom: 6,
            center: { lat: waypts[0].location.lat, lng: waypts[0].location.lng }
        });
        //add map
        directionsDisplay.setMap(map);

        // set the new
        //new Array(waypts[0].location.lat,waypts[0].location.lng)
        directionsService.route({
            origin: { lat: waypts[0].location.lat, lng: waypts[0].location.lng },//db waypoint start
            destination: { lat: waypts[0].location.lat, lng: waypts[0].location.lng },//db waypoint end
            waypoints: waypts,
            travelMode: google.maps.TravelMode.WALKING
        }, function (response, status) {
            if (status === google.maps.DirectionsStatus.OK) {
                directionsDisplay.setDirections(response);
            } else {
                window.alert('Ha fallat la comunicació amb el mapa a causa de: ' + status);
            }
        });
    }

My recommendation is that you use a jQuery mapping of the google API such as GMaps link

function initMap() {
        //get api uses
        var directionsService = new google.maps.DirectionsService;
        var directionsDisplay = new google.maps.DirectionsRenderer;

        var waypts = [{ location: { lat: 41.94, lng: 1.56 }, stopover: true },
            { location: { lat: 41.99, lng: 1.53 }, stopover: true },
            { location: { lat: 41.98, lng: 1.52 }, stopover: true }];

        var mapa = new GMaps({
            el: '#map',
            lat: waypts[0].location.lat,
            lng: waypts[0].location.lng,
            zoom: 4
        });
        mapa.drawRoute({
            origin: [waypts[0].location.lat, waypts[0].location.lng],
            destination: [waypts[waypts.length - 1].location.lat, waypts[waypts.length - 1].location.lng],
            travelMode: 'walking',
            strokeColor: '#0054c2',
            strokeOpacity: 0.6,
            strokeWeight: 6
        });
    }