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:


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


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


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:


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


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