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.
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.
Click on the Export link in the Open Street Maps window. Then you'll notice a list of choices (how you want it exported) I pick Embeddable HTML here, because I'm just sticking it in a website page. You also need to click the "Add marker to the map" and then click where the place is that you're trying to show.
That's pretty much it on the map page. Then you grab the code in the Output box (down below the "add a marker" link) Just click in that box, hit Ctrl+A to select it all, and Ctrl+C to copy it, then go to wherever it is you edit your website. Paste that code in somewhere. I stuck it in a paragraph just so it would have the same margins as everything else, but there's nothing stopping you from putting it in it's own div. Here's mine:
One problem 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 imagery) and compare the two.
I hate to say it, 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, 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. Mapquest and Bing both show my house… Pick your poison I guess.
Good luck. Let me know how you make out.
Written by:
Craig
