10 maximale Wegpunkte in eingebetteten Karten umgehen

Question

Ich melde mich freiwillig, um eine html5-App für eine lokale NPO zu schreiben, die häufig Essen liefert. Die App ist ziemlich einfach - eine Lieferung Freiwilliger kommt in das Zentrum, wo sie ihre Lieferwege herunterladen können. Sie können dann ihre Routen anpassen (ziehen und ablegen) oder Wegpunkte für eine optimale Lieferung neu anordnen (z. B. in der Nähe ihres Hauses, ihres Büros oder zurück in der Mitte mit Hilfe der Karten-Web-Service-API beenden).

Hier ist das Problem. All dies funktioniert wunderbar mit der Google Maps Web API. Die Google Embedded Map (in einem Iframe) zeigt jedoch nur 10 Wegpunkte an, wenn die durchschnittliche Route 13 beträgt. Wenn ein Benutzer auf die größere Karte klickt, werden nur 10 der 13 Stopps angezeigt.

Gemäß der Vereinbarung muss ich eine Google-Karte anzeigen, aber nur einige der Haltestellen zu zeigen wäre für die Benutzer verwirrend.

Gibt es einen Weg um diese Grenze? Ist es möglich, die Route manuell aus JavaScript zu erstellen (basierend auf dem Web-API-Ergebnis) und trotzdem die Directions-Methode zu verwenden, falls ein Benutzer auf die großen Karten klickt und die gesamte Route drucken möchte.

ich die Anweisungen bin mit einzubetten 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

ich nie wirklich eine praktikable Lösung gefunden, so dass anstelle der Route zu zeigen, ich bin versucht, Marker für die Wegpunkte in nummerierter Reihenfolge hinzuzufügen. Es erfüllt meine Absicht, erfüllt die gmaps-Vereinbarung und gibt dem Benutzer einen Überblick über die Route.

Ich benutze dburles: google-maps für meteor/reagieren.

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 
     }) 
});