DEV Community

Mike Ralphson
Mike Ralphson

Posted on

Replacing embedded GoogleMaps with OpenStreetMap

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>
Enter fullscreen mode Exit fullscreen mode

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.

Discussion (2)

Collapse
jovansavic profile image
Jovan Savic

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?

Collapse
kenguest profile image
Ken Guest

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.)