Google Maps utan API-nyckel

Normalt arbetar du med Maps JavaScript API när du integrerar Google Maps, vilket kräver en API-nyckel och kan orsaka kostnader som inte bör underskattas med högre åtkomstnummer. Det finns bra alternativ som mapbox eller OpenStreetMap , men de uppnår ännu inte de många funktioner som erbjuds av Google. Google själv erbjuder också ett sätt utan en API-nyckel via delningsfunktionen, som vi kan använda för våra ändamål.


Denna sökväg kan användas programmatiskt för att mata ut vilken adress som helst (även utan att veta latitud och longitud). Dessutom innehåller kartan (till skillnad från JS-motsvarigheten) en länk till färdplaneraren. Kartan kan också spridas upp med hjälp av CSS-filter (även om resultatet inte riktigt kommer nära de ursprungliga stilarna som är möjliga med JS API).

Under många år var sättet att göra detta via parametern output = embed , som Google inte stöder officiellt och så har visningsfel ökat under det senaste förflutna:

331190767bb32b2468632e609223c53e

Om du använder den officiella delningsfunktionen via maps.google.de får du till exempel följande kod:

331190767bb32b2468632e609223c53e

Om vi ​​strukturerar den långa webbadressen i src- parametern blir ett mönster:

331190767bb32b2468632e609223c53e

Vi känner igen följande datatyper:

  • m: matris
  • s: sträng
  • f: flyta
  • d: Dubbel
  • i: heltal
  • e: enum

Efter några försök och felförsök kan vi eliminera vissa värden och packa de viktigaste värdena i variabler, till exempel för att dynamiskt definiera adressen:

331190767bb32b2468632e609223c53e

Slutligen kan vi lägga till en vackrare look på kartan, till exempel med hjälp av följande CSS-kod:

331190767bb32b2468632e609223c53e

Till slut får vi en gratis, dynamisk karta som fungerar pålitligt:

Tillbaka