Er zijn verschillende manieren om GoogleMaps in de webviewer te tonen. Google heeft de API in de afgelopen jaren ook al enkele keren gewijzigd. Hier stel ik het gebruik van de Javascript v3 API aan jullie voor.
Ik gebruikte voorheen de GoogleMaps-Embed API en die werkt nog steeds prima. Gebruik je echter FMPro 12.0 v 5 of nieuwer (inclusief versie 13x) op MacOSX, dan krijg je met de embed-API een groot grijs vlak te zien ipv een mooi kaartje! Ik heb dat als BUG neergelegd bij FMI, maar zij komen er niet uit en geven als advies de nieuwe GoogleMaps Javascript v3 API te gebruiken.
Die API lijkt erg simpel (dat is ie eigenlijk ook) maar als je niks van Javascript weet, dan wordt het toch ietsje lastiger en dat geldt ook voor mij, dus ben ik er maar eens ingedoken.
De eerste stap die moet worden genomen is het verkrijgen van een developers-account bij google:
- Mocht je het nog niet hebben, zorg dan voor een account bij google. Daarvoor mag je je eigen emailadres gebruiken! Je maakt dan een account op maak een nieuw google-account.
- Start met het maken van een project voordat je verder gaat. Ga naar de Google APIs console en klik op Create project. Geef het project een naam en klik op Create.
- Nu kan je op de naam van je project klikken, dan wijzigt het linker menu. Klik daat op API & Auth, dan op APIs en zoek in de lijst Google Maps JavaScript API v3 en schakel deze in.
- Klik in het linker paneel op Credentials en maak daar bij Public API access een nieuwe KEY aan voor een browser. Je kan in de dialoog die je krijgt aangeven wie de KEY mogen gebruiken. Laat dat leeg, tenzij je alleen vanaf een bepaalde plek de API wilt gebruiken.
- Kopieer de key die je zojuist hebt gegenereerd, die moet je namelijk verwerken in je aanroep. In het voorbeeld-bestand kan je dat in het veldje API-KEY plakken en dan werkt alles.
Je kan het voorbeeldbestand GoogleMaps hiervandaan downloaden en uitpakken. Vul een API-KEY in en je kan aan de gang.
Alle benodigde informatie over de API kan je vinden op: https://developers.google.com/maps/documentation/javascript/tutorial en op: https://developers.google.com/maps/documentation/javascript/reference
Op dit moment lijkt het overigens er op dat dit hele verhaal ook zonder API-KEY werkt, maar het is een kwestie van tijd, dat ze dit gaatje opmerken bij Google en weer dicht gooien. Maak dus gerust een KEY aan.
In het voorbeeldbestand zit er slechts één voorbeeld van wat je deze API kan doen, maar met de documentatie kan je volop aan de gang om je eigen kaarten te maken. Dit voorbeeld toont de routes naar verschillende adressen, met als startpunt een statisch adres in Amsterdam, maar het staat je vrij om dat te wijzigen.
De API is een javascript-library die je op de juiste manier moet aanroepen. Je kan voor een leuke methode om dat te integreren ook eens kijken in een topic op clarify.net dat daarover gaat: http://www.clarify.net/viewtopic.php?f=45&t=8309 want de techniek die ik hier gebruik is daarop gebaseerd.
Als basis wordt een simpele HTML-pagina met een div gebruikt:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div id=“map-canvas”></div>
</body>
</html>
Daar wordt in de header een aantal elementen toegevoegd, zoals de stijl:
<style type=“text/css”>
html{
height:100%
}
body{
height:100%;
margin:0;
padding:0
}
#map-canvas{
height:100%
}</style>
En de script(s):
<script type=“text/javascript” src=“https://maps.googleapis.com/maps/api/js?key=[APIKEY]&language=nl”></script>
Het label [APIKEY] moet later worden vervangen voor de KEY die je een stukje terug als het goed is hebt bemachtigd.
Het volgende script is het eigenlijke script:
<script type=“text/javascript”>
var directionsDisplay;
var directionsService = new google.maps.DirectionsService();
var map;
var userdata = {
[USERDATA]
};
function initialize() {
directionsDisplay = new google.maps.DirectionsRenderer();
var mapOptions = {
disableDefaultUI: false
};
map = new google.maps.Map(document.getElementById(‘map-canvas’),
mapOptions);
directionsDisplay.setMap(map);
}
function calcRoute() {
var start = userdata.start ;
var end = userdata.end ;
var request = {
origin: start,
destination: end,
travelMode: google.maps.TravelMode.DRIVING
};
directionsService.route(request, function(response, status) {
if (status == google.maps.DirectionsStatus.OK)
{ directionsDisplay.setDirections(response); }
});
}
google.maps.event.addDomListener(window, ‘load’, initialize);
</script>
De tag [USERDATA] moet worden vervangen voor de gegevens die uit Filemaker moeten komen. Dat is het startpunt en het eindpunt van de route die je opvraagt. Bijvoorbeeld:
start: beursplein+5+amsterdam+nederland,
end: lange+voorhout+den+haag+nederland
Tenslotte is er om de kaart te tekenen nog aan het body-element een attribuut toegevoegd, waarmee bij het laden van de pagina de query naar googlemaps wordt afgevuurd:
<body onload=“calcRoute();”>
Dit hele verhaal staat in een voorkeurentabel en in de webviewer staat een berekening die dit ophaalt en de benodigde substitute’s uitvoert.
Om de layout “responsive” te maken heb ik er nog een scripttrigger op de layout gezet, die, zodra de venstergrootte wordt aangepast, de webviewer opnieuw laat renderen.