Using Open Street Map on a Website

I recently built a website and the customer wanted their location shown on a map right on the site. This would have been easy with Google Maps, but then, I'm about OPEN SOURCE solutions, right? I went with Open Street Map instead.

July 31, 2012

I started off with these OpenStreetMap for Your Website directions by Maning Sambale but quickly found that openstreetmap didn't really know where the address was that I wanted.  When hunting for an example to use here, I found one that was even farther off the mark.  This required a few extra steps.  I'll walk you through…

First, I need an address.  I'm picking 40 Gore Road.  This is the house I grew up in.  I was just down there helping clean out the garage a few weeks ago, so I know the buildings are still there.  When I type 40 Gore Road Alfred Maine into the search box on Open Street Map, I'm taken to the following map:

The red arrow up near the top is where OSM thinks 40 Gore Road is.  The red X nearer the bottom is where the house actually is.  I've left the scale so you can see that is a couple or three thousand meters off.  OpenStreetMaps is not the only culprit; all of the online map apps I tried are off to some degree.

The interface has changed a little bit since I wrote this tutorial.  Instead of clicking on the Export link in the Open Street Maps window, now you hit the Share button.  It's on the right side of the map — the bottom arrow.

You'll notice a list of choices (how you want it exported).  I pick HTML here, and copy the resulting code into my website.  In order to show where my desired location is, I checked the Include Marker box, then dragged the resulting blue marker to the correct spot.  That's pretty much it on the map page.  This is what I end up with:


View Larger Map


One problem you'll run into is that you can't see actual buildings.  What you'll have to do, if you're not exactly sure where a location is, is to have Open Street Maps open in one browser window, some other map program in another (with aerial/satellite imagery) and compare the two.

I hate to say it, but the aerial imagery is all over the place as far as "up-to-dateness" in the maps I'm looking at.  My father planted some spruce trees between he and the neighbor.  They're biggest in Google's maps, smallest in MapQuest's, and right in the middle on Microsoft's.  On the other hand, my house (a couple towns away in West Newfield), which has been here for eight years with the land starting to get cleared a couple years before that, is still shown as a wooded lot on Google.  (as of summer 2013 though, my house is now on Google Maps, with snow all around it) Mapquest and Bing both show my house…  Pick your poison I guess.

Good luck.  Let me know how you make out.

Leave a Reply

Your email address will not be published. Required fields are marked *