Normaal gesproken werk je bij het integreren van Google Maps met de Maps JavaScript API , waarvoor een API-sleutel nodig is en bij hogere toegangsnummers kosten kunnen ontstaan die niet mogen worden onderschat. Er zijn geweldige alternatieven zoals mapbox of OpenStreetMap , maar die bieden nog niet de verscheidenheid aan functies die Google biedt. Google biedt zelf ook een manier aan zonder API-sleutel via de deelfunctie, die we voor onze doeleinden kunnen gebruiken.
Dit pad kan programmatisch worden gebruikt om elk adres uit te voeren (zelfs zonder de breedte- en lengtegraad te kennen). Bovendien bevat de kaart (in tegenstelling tot de JS tegenhanger) een link naar de routeplanner. De kaart kan ook worden opgeknapt met behulp van CSS-filters (hoewel het resultaat niet helemaal in de buurt komt van de native stijlen die mogelijk zijn met de JS API).
Jarenlang was de manier om dit te doen via de parameter output = embed , die Google officieel niet ondersteunt en daarom zijn weergavefouten in het recente verleden toegenomen:
331190767bb32b2468632e609223c53e
Als u de officiële deelfunctie via maps.google.de gebruikt , krijgt u bijvoorbeeld de volgende code::
331190767bb32b2468632e609223c53e
Als we de lange URL structureren in de parameter src , ontstaat er een patroon:
331190767bb32b2468632e609223c53e
We herkennen de volgende gegevenstypen::
- m: matrix
- s: tekenreeks
- f: zweven
- d: Dubbel
- ik: geheel getal
- e: opsomming
Na een paar probeer- en foutpogingen kunnen we enkele waarden elimineren en de belangrijkste waarden in variabelen verpakken, bijvoorbeeld om het adres dynamisch te definiëren:
331190767bb32b2468632e609223c53e
Ten slotte kunnen we een mooier uiterlijk aan de kaart toevoegen door bijvoorbeeld de volgende CSS-code te gebruiken::
331190767bb32b2468632e609223c53e
Uiteindelijk krijgen we een gratis, dynamische kaart die betrouwbaar werkt: