loading...

Replacing embedded GoogleMaps with OpenStreetMap

mikeralphson profile image Mike Ralphson ・2 min read

Recently, Google announced that as of June 11th 2018 a billing account (credit/debit card) and API key would be mandatory requirements for using GoogleMaps, even if your usage currently fell below the free tier of $200 'value' per month.

If however, you feel this is an unnecessary complication, and wish to avoid nasty surprises, especially if someone else were to use your API key, then it may be time to investigate an alternative, such as OpenStreetMap.

My usage was simply to provide a dynamic location map on my website, so the steps for me were particularly simple:

  • Go to OpenStreetMap.org
  • Search for the location you want as the centre of the map, or use the arrow to Show My Location
  • Select the desired layers, such as Standard, Cycle Map, Transport etc
  • Zoom and pan as necessary, using the + and - icons and your mouse
  • Select the Share icon
  • Decide if you want to show a marker, and tick the checkbox if so
  • Highlight the HTML tab
  • Copy and paste the resultant HTML fragment into your website

For example:

<iframe width="425" height="350" frameborder="0" scrolling="no" 
marginheight="0" marginwidth="0" 
src="https://www.openstreetmap.org/export/embed.html?bbox=-2.493209838867188%2C53.50540525319918%2C-2.246360778808594%2C53.61980121473449&amp;layer=mapnik&amp;marker=53.56274386269267%2C-2.3699569702148438" 
style="border: 1px solid black"></iframe>
<br/><small>
<a href="https://www.openstreetmap.org/?mlat=53.5627&amp;mlon=-2.3700#map=12/53.5626/-2.3698">
View Larger Map</a></small>

As you can see, the key ingredients are the latitude and longitude co-ordinates of the bounding-box of the map area required. The%2Cs are URL-encoded commas. You can also tweak the iframe width and height etc to suit your needs.

Map example

Happy mapping.

Posted on by:

mikeralphson profile

Mike Ralphson

@mikeralphson

Maintainer APIs.guru, OpenAPI Initiative Technical Steering Committee member, co-chair W3C WebAPI Discovery Group

Discussion

pic
Editor guide
 

Nice post Mike! I want to show location based on latitude and longitude on the contact page. How can I show a map with dynamically added latitude and longitude? Also, is possible to do that without third-party JS libraries?

 

And if need be, especially for more intensive uses of such things as OSM have a relatively limited capacity, people can migrate to using services such as mapbox.com/ - which is probably cheaper than what Google Maps charge and still use OpenStreetMap data that they can add to themselves.

(I'm not affiliated with mapbox in anyway - I'm just aware of their services is all.)