Google Maps without an API key

Normally, when integrating Google Maps, you work with the Maps JavaScript API , which requires an API key and can cause costs that should not be underestimated with higher access numbers. There are great alternatives such as mapbox or OpenStreetMap , but they do not yet achieve the variety of features offered by Google. Google itself also offers a way without an API key via the share function, which we can use for our purposes.


This path can be used programmatically to output any address (even without knowing the latitude and longitude). In addition, the map (in contrast to the JS counterpart) contains a link to the route planner. The map can also be spruced up with the help of CSS filters (although the result does not quite come close to the native styles that are possible with the JS API).

For many years, the way to do this was via the parameter output = embed , which Google does not officially support and so display errors have increased in the recent past:

331190767bb32b2468632e609223c53e

If you use the official share function via maps.google.de , you will get the following code, for example:

331190767bb32b2468632e609223c53e

If we structure the long URL in the src parameter, a pattern results:

331190767bb32b2468632e609223c53e

We recognize the following data types:

  • m: matrix
  • s: string
  • f: float
  • d: Double
  • i: integer
  • e: enum

After a few trial and error attempts, we can eliminate some values ​​and pack the most important values ​​in variables, for example to dynamically define the address:

331190767bb32b2468632e609223c53e

Finally, we can, for example, use the following CSS code to add a nice touch to the map:

331190767bb32b2468632e609223c53e

In the end, we get a free, dynamic map that works reliably:

Back