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>

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.

Happy mapping.