Het vorige artikel (en voorbeeld) toonden een route van A naar B in een kaart. Dat is natuurlijk leuk, maar daar heb je meestal geen webviewer voor nodig. Je wilt vaak meer en dat kan met het voorbeeld van deze keer, dat een (paar) stapje(s) verder gaat:
1) De route bevat waypoints
2) De volgorde wordt vanzelf geoptimaliseerd
3) Er wordt een totale afstand berekend
De basis is hetzelfde bestand van het vorige artikel. Er is een veld toegevoegd “Waypoint”, waarin een lijst van via punt/adressen in kan worden gezet. De volgorde van die adressen is niet belangrijk, want google-maps berekent zelf de ideale route. Verder is de berekening van het veld “userdata” wat aangepast om de lijst in het juiste (javascript-formaat) aan het javascript in de pagina aan te bieden.
Het javascript is een kleine beetje uitgebreider dan de vorige keer. Houdt ze naast elkaar en dan zie je de verschillen denk ik wel.
In een notedop: het request van de map is aangepast/uitgebreid met een if-constuctie én de functie “computeTotalDistance” is toegevoegd. De body van de html-pagina heeft nu twee DIV’s zodat de routebeschrijving en de toaalafstand kunnen worden getoond. Verder kan ik er weinig aan toevoegen. O ja, dit voorbeeld werkt ook prima op iOS in Filemaker Go.
Veel plezier met het bekijken van het voorbeeldbestand Googlemaps_Routeplanner
En nog een voorbeeld waarin de waypoints en de route kan verslepen Googlemaps_Draggable