Google Maps uden en API-nøgle

Normalt, når du integrerer Google Maps, arbejder du med Maps JavaScript API , som kræver en API-nøgle og kan medføre omkostninger, der ikke bør undervurderes med højere adgangsnumre. Der er gode alternativer såsom mapbox eller OpenStreetMap , men de opnår endnu ikke de mange funktioner, der tilbydes af Google. Google tilbyder også en måde uden en API-nøgle via delingsfunktionen, som vi kan bruge til vores formål.


Denne sti kan bruges programmatisk til at udsende en hvilken som helst adresse (selv uden at kende breddegrad og længdegrad). Derudover indeholder kortet (i modsætning til JS-modstykket) et link til ruteplanlæggeren. Kortet kan også sprøjtes op ved hjælp af CSS-filtre (skønt resultatet ikke helt kommer tæt på de oprindelige stilarter, der er mulige med JS API).

I mange år var måden at gøre dette på at bruge parameteren output=embed , som Google ikke officielt understøtter, hvorfor visningsfejl er steget de seneste år:

331190767bb32b2468632e609223c53e

Hvis du bruger den officielle delefunktion via maps.google.de , får du f.eks. Følgende kode:

331190767bb32b2468632e609223c53e

Hvis vi strukturerer den lange URL i src- parameteren, resulterer et mønster:

331190767bb32b2468632e609223c53e

Vi genkender følgende datatyper:

  • m: matrix
  • s: streng
  • f: flyde
  • d: Dobbelt
  • i: heltal
  • e: enum

Efter et par forsøg og fejlforsøg kan vi fjerne nogle værdier og pakke de vigtigste værdier i variabler, for eksempel for dynamisk at definere adressen:

331190767bb32b2468632e609223c53e

Endelig kan vi for eksempel pifte kortet op ved at bruge følgende CSS-kode:

331190767bb32b2468632e609223c53e

I sidste ende får vi et gratis, dynamisk kort, der fungerer pålideligt:

Tilbage