Putting a Bing Map on your WebsitePosted on June 18th, 2009 4 comments
update : if you have arrived here via a web search (e.g. /tag/bing-maps/), please go to the main article page to see my examples in action and read my updated advice about putting maps on your blog!
Looking at my analytics, I was surprised to find that some users had managed to land on my blog having searched for ‘putting a Bing Map on your website’. I assume this site appeared in search results because of the tags ‘Bing’ and ‘Maps’ which occur frequently in my posts. Inspired by this discovery, I have decided to provide the answer to this search query here so as not to disappoint any future Bing map seeking visitors.
The Easy Guide : what are your options?
Multimap embedded Maps
Did you know that Multimap, the largest UK-based online mapping service was acquired by Microsoft in December 2007? Multimap is now part of the Bing Maps portfolio and includes much of the mapping data and imagery available on the Bing Maps site whilst having kept its distinctive and popular local map styles, notably Collins Bartholomew (A-Z) and Ordnance Survey in the UK. So if you are using a Multimap it is a Bing Map. Go forth and embed:
- Go to multimap.com, search maps and find the map you want
- Click on the top right of the map next to the print button
- read and accept the terms and conditions by ticking the box then click ‘customise and preview’
- follow the instructions on the next page and copy the html for insertion in your page and if you feel confident you can also edit the html to further customise the result
An embedded Multimap
This is a map of Greenwich Park pinpointing the location at which I took the pictures for my Photosynth, HDView and DeepZoom post. The code below is what I used to create this map. It is copy-and-pasted from the multimap embed service. I have tweaked it a little, but you don’t need to if you are not comfortable with that. Note that with minimum effort you get:
- a draggable map (yes you can move this map with your mouse)
- context actions by right clicking the map (zoom in/out and ‘move map to here’)
That’s a lot for around 5 minutes work and I am a big fan of the local maps (here A-Z) which display so much more information than standard vector maps found on Google and elsewhere.
- go to http://www.microsoft.com/maps/developers/ and click on the interactive SDK
- grab or edit then grab the code you need from there (the ‘Show Me’ tab gives you the interactive preview so you can see the results of any changes made straight away without having to leave the SDK)
- paste the code into your webpage and away you go (see below for advice to wordpress bloggers)
A Bing Map showing Birds Eye view with a Photosynth overlay
Mouse over the marker to see the synth.This is again the same location I gave above showing the View of London from Greenwich Observatory photosynth, which featured in the Photosynth, HDView and DeepZoom post. Here I used the basic interactive SDK code to show a specific Birds Eye scene and added an overlay with the photosynth included inside as an iframe (this code snippet is also a copy and paste from the photosynth website).
This is the code I used to display the map and synth. You will also need to call the API and set a containing <div> to display the map as per the sdk (1 line each).
How to use Bing Maps API in my wordpress blog
Yes, the problem is that by default:
- wordpress does not give access to edit the code in the document head
- you need to be able to add the ‘onload’ attribute to the <body> tag to load the map and this is also not possible without some template hacking in wordpress (especially to do this for individual posts only)
The solution (one of many I’m sure):
- Install this plugin http://lud.icro.us/wordpress-plugin-head-meta/ which enables you to add your own code to the header of any individual post
- use this in your script:
window.onload = GetMap;
instead of the onload event in the body tag
- put the script above into a file and upload to your webserver (where you host the blog)
- Add two custom headers using your newly installed plugin, the first to call the VE Map Control and the second to call your script
That should do it. It worked for this page anyway .
Update: note this method will only work on the page for which it was intended, so for example I noticed many users arriving here via web search http://blog.harakis.net/tag/bing-maps/ where this page comes top, but the maps will not display because the wordpress plugin applies to individual posts. You could use a plugin to apply to the whole site to solve this, but I didn’t want to do that as it requires needlessly downloading these APIs on pages where they are not required.
As I mentioned earlier Multimap is part of the Bing Maps portfolio and there is an Open API available for non-commercial use for this too:
This is also very easy to use and has lots of demos and code samples to look at and use. There are some differences between the apis and you might prefer to use multimap if you are used to it or just prefer the map styles and controls.
- Sign up for an openapi key http://www.multimap.com/openapi/signup/
- read the documentation and examples provided and use the code provided to build your map
- customise the code and put it on your page
A localised Multimap map with a Photosynth in the infobox
Click the marker to see the synth.This is a map from Radom, Poland with a photosynth I made of a lit Christmas Angel in the town square. A nice feature of the Multimap API is localisation. By adding a parameter to the end of your API call (?locale=pl-PL in this case), you can localise the map control. All widgets and text are in Polish. I used just two demos to get this working:
Just a few lines of code gives you a fully functional localised map with widgets, marker and embedded photosynth inside the infobox:
- Bing Maps for developers
- Multimap Open API
- Johannes Kebeck’s blog
- Bing Maps blog
- Bing Maps forum
- Multimap forum
- Photosynth website
Commercial Licensing for businesses
Great post! One small detail about Photosynth to make your examples even better:
You can prevent the ‘Click to view the synth’ state, and load it immediately upon popup if you the delayLoad parameter on the Photosynth embedding URL to be false Here’s the difference:
Here it is with delayLoad=true as you have it:
And here it is loading immediately:
Cheers, David Gedye
Photosynth Group Program Manager
Nice article! Thanks for the comment on my blog http://joelblogs.co.uk about the New Microsoft Bing Search Service with Embeddable Virtual Earth Maps.
Well done for sniffing out the API level stuff with Bing maps! Great to see it all in one place.
As for Bing Maps & WordPress, I’ve made a simple plugin. Please kindly refer to http://wordpress.org/extend/plugins/bing-maps-widget/
Leave a reply