Google Maps zonder API-sleutel

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 werd de methode met de parameter output=embed veel gebruikt, maar Google biedt hier officieel geen ondersteuning meer voor. Daarom zijn weergavefouten de laatste jaren vaker voorgekomen.:

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

Tot slot kunnen we bijvoorbeeld de volgende CSS-code gebruiken om het uiterlijk van de kaart te verbeteren.:

331190767bb32b2468632e609223c53e

Uiteindelijk krijgen we een gratis, dynamische kaart die betrouwbaar werkt:

Terug