chess, maps, tech, stuff
RSS icon Email icon Home icon

  • Putting a Bing Map on your Website

    Posted on June 18th, 2009 alexis 3 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?

    1. Use Multimap embedded Maps
    2. Use the Bing Maps API
    3. Use the Multimap Open API
    4. Resources

    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 link 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 

    <div id="MMEmbeddedMap">
        <iframe frameborder="0" height="400" marginheight="0" marginwidth="0" scrolling="no" src="http://www.multimap.com/client/embed/?width=650&amp;height=400&amp;lat=51.47805&amp;lon=-0.00368&amp;zoomFactor=16&amp;emid=HxidDF8KkD6gftefSe7mDU3teaLHNmVi&amp;qs=London&amp;countryCode=GB&amp;mapType=map&amp;moveMap=116,46" width="650">
        </iframe></div>

    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.

    Use the Bing Maps API

    This is more advanced than the previous example, but delivers much more potential. If your site is non-commercial you can use this for free. Licensing information for commercial sites is at the bottom. You will need at least a basic knowledge of JavaScript to use this although for basic functionality, it is still very easy.

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

    var synth1 = "<iframe frameborder=0 src='http://photosynth.net/embed.aspx?cid=38e9b3b7-db8e-4155-918d-345344f2ea8b&delayLoad=true&slideShowPlaying=false' width='400' height='300'></iframe>"; 
    <!--Pushpin Objects for each Synth--> 
    var propertypin1 = null; 

    <!--Lat Longs for each Pushpin--> 
    var propertypoint1 = new VELatLong(51.47812550689915,-0.0017300248145924524); 

    <!--Instantiate Map--> 
    function GetMap()      
    {         
    map = new VEMap('myMap');     
    map.LoadMap(propertypoint1 , 17);
                map.AttachEvent("onobliqueenter", OnObliqueEnterHandler);
             }

             function OnObliqueEnterHandler()
             {
                if(map.IsBirdseyeAvailable())
                {
                   var ViewFromObservatory = new VELatLong(51.47812550689915,-0.0017300248145924524); 
                   map.SetBirdseyeScene(ViewFromObservatory );
                }

    map.onLoadMap = AddPropertyPins(); 

    }

    <!--Call back adds pins to the map--> 
    function AddPropertyPins() 
    { 
    map.ClearInfoBoxStyles(); 
    <!--Pin 1, Synth 1--> 
    propertypin1 = new VEShape(VEShapeType.Pushpin, propertypoint1); 
    propertypin1.SetDescription(synth1); 
    propertypin1.SetTitle("View of London from Greenwich Observatory"); 
    map.AddShape(propertypin1); 
    } 

    window.onload = GetMap;

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

    1. 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
    2. use this in your script: 
      window.onload = GetMap;

      … instead of the onload event in the body tag

    3. put the script above into a file and upload to your webserver (where you host the blog)
    4. Add two custom headers using your newly installed plugin, the first to call the VE Map Control and the second to call your script 
      1: <script src=http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=6.2 
      type="text/javascript"></script>
      2: <script type="text/javascript" src="[path-to-my-js-script]"></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.

    Use the Multimap Open API

    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:

    http://www.multimap.com/share/documentation/openapi/

    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:

    function onLoad() {
        mapviewer = MMFactory.createViewer( document.getElementById( 'mapviewer' ) );
        mapviewer.goToPosition( new MMLatLon( 51.40114006829573,21.153375506401065 ), 16 );
        mapviewer.addWidget( new MMPanZoomWidget() );
        mapviewer.addWidget( new MMMapTypeWidget() );
        var marker = mapviewer.createMarker ( mapviewer.getCurrentPosition() );
        var html = '<iframe frameborder=0 src=\'http://photosynth.net/embed.aspx?cid=85e818df-734d-4ecb-82f8-9cb65f202c7c&delayLoad=true&slideShowPlaying=false\' width=\'400\' height=\'300\'></iframe>';
    marker.setInfoBoxContent ( html, { } );
    }
    MMAttachEvent( window, 'load', onLoad );

    I added this code to my javascript file created for the Bing API map above and hey presto, Multimap (Bing) map on my blog.

    Resources

    Credits

    Reference

    Commercial Licensing for businesses

    Back to the top

    Tech , , ,

Shopping Cart

Your cart is empty.

My tweeties

  • car was clamped and towed in error. Not so much as a note in the letterbox. The clamping company kindly apologised though, so that's ok then 2009-09-19
  • Got back from Canada to find my car gone.Investyigation It was clamped and towed in error. 2009-09-19
  • Toronto docks.ahh Finally some peace in this noisy city. 2009-09-18
  • More updates...
Powered by WordPress
Designed by My Mobiles