Working around 10 Maximum Waypoints in Embed Maps

Question

I'm volunteering my time to write an html5 app for a local NPO that frequently delivers food. The app is fairly simple - a delivery volunteer comes to the center where they can download their delivery routes. They are then allowed to customize their routes (drag and drop) or to re-order waypoints for optimum delivery (e.g. finish near their house, their office, or back at the center using maps web service API).

Here's the problem. All of this is working beautifully using the google maps web api. However, the google embedded map (in an iframe) is only showing 10 waypoints, when the average route has 13. Furthermore, if a user clicks to see the larger map, it only shows 10 of the 13 stops they have.

According to the agreement, I need to display a google map, but only showing some of the stops would be confusing to the users.

Is there a way around this limit? Is it possible to manually build the route from javascript (based on the web api result) and still use the directions method in case a user clicks into the large maps and wants to print the full route.

I'm using the directions embed API:

googleurl/directions/?origin=XX&destination=XX&waypoints=XX|XX|XX|XX|XX|XX|XX|XX|XX|XX|XX|XX|XX&key=XXXXX

Answer 1

I never really found a workable solution, so instead of showing the route, I am attempting to add markers for the waypoints in numbered order. It accomplishes my intent, meets the gmaps agreement, and gives the user an overview of the route.

I'm using dburles:google-maps for meteor/react.

if(!this.isLoading){
    Clients.find().forEach(function(document){
        var map = GoogleMaps.maps['mymap'];
        var marker = new google.maps.Marker({
            draggable: true,
            animation: google.maps.Animation.DROP,
            position: new google.maps.LatLng(document.lat, document.lng),
            map: map.instance,
            id: document._id,
            title: document.seq
        })
});