Embed Bing Maps Twitter Maps in your website

By Sunshine | In Bing | Posted March 13, 2010 8 comments

Chris Pendleton announced that you can now embed Bing maps Twitter Maps on your site:

We’ve just released an update to the Twitter Maps application in the Bing Maps Application Gallery. NOW, you can embed our Twitter Maps functionality into your own web site. This means you can be cool by having a Bing Map on your web site, blog, favorite social networking site with the Tweets you care about. And, WOW, it’s super easy.

Easy eh, let’s give it a go!

1. First off we go to Bing maps and get to the location we want. With MIX10 coming up, let’s go for Las Vegas!
2. Next we load the twitter map app: click Map Apps, then on the Twitter Map App
 TwitterMapApp
3. We will want tweets from MIX to turn up so in the search filter we put “MIX” (without quotes)
SearchFilter
Click submit.
4. Alright, now it’s time to get the embed code. Click Embed in your site on the bottom left.
Embedlink

5. Next we can set the map location (Fixed or Anywhere) and the dimensions (height and width).
EmbedCode  image
We’ll leave it on the defaults for now.
6. The embed code (under point 4) is produced, which we can copy and paste (Ctrl c, Ctrl v) into our site:

There, all done. Now you can follow tweets coming from MIX10 right here! It was easy indeed!

Thanks team for this update, lovin’ it!

Edit: I wonder why there are no tweets showing up in the embed code right now, whilst there are on Bing maps with the app and in the preview!
Would it be the Fixed code? Trying Anywhere below (with refined search filter to MIX10).

Apparently it is! Team, you got some fixing to do! Edit: fixed!

Posted March 13th, 2010 at 4:46 pm
Category: Bing
Tags: Maps
  • bingTmaps

    Hi Sunshine,

    Your embed code for the first iframe:

    iframe scrolling=”no” width=”350″ frameborder=”0″ src=”http://www.bing.com/twitter/maps/embed?version=1.0&eid=948442084&keyword=MIX&lat=36,1716957092285&lon=-115,139762878418&z=10″ height=”350″

    has the lat/lon parameters with commas in them instead of a decimal point and so it’s putting your map over Antarctica. Try changing them back to a period.

    • Sunshine – LiveSide.net

      Thanks for the reply :) Looks like there are some International issues. I got the embed code with commas instead of decimal points, but even with decimal points I still see “No recent tweets…”,on any blog using the fixed code, not just here on LiveSide! Can this be fixed? Kip, who is in the US, can see the tweets in the fixed one. Would be a shame if nobody outside the US (I am in The Netherlands btw) could see those cool fixed Twitter maps :(

      • http://blogs.msdn.com/rpatel/ Ravi

        Hi Sunshine,
        I’m one of the msft devs who worked on this. Thanks for providing the details. We’ll look at the international issues this week.
        Ravi

        • Sunshine – LiveSide.net

          Hi Ravi,
          Thanks :) If you need anything, be it more info, testing or even just an “it’s fixed” confirmation, my email addy can be found on the About page ;)

  • Sunshine – LiveSide.net

    Hi bingTmaps,
    I used the exact code I got from the app., could this be a location problem? I’m not in the US. Even now I changed the commas in lat/lon to decimal point it still doesn’t work.

  • Sunshine – LiveSide.net

    Hi bingTmaps,
    Thanks for the reply. I used the exact code I got from the app., could this be a location problem? I’m not in the US. Even now I changed the commas in lat/lon to decimal point it still doesn’t work, I’m still seeing “No recent tweets…”.

  • JohnCz

    It seems with Silverlight enabled Map Apps, each app is responsible for handling its own embed code options. I’m curious why they didn’t utilize the same functionality in the AJAX version of “Share your map” button. More custom parameterization per app? I hope they standardize this better.

    • http://blogs.msdn.com/rpatel/ Ravi

      Hi John,

      The “Share your map” button for both Bing Maps AJAX & Silverlight effectively allows you to share the current state of the map — in Silverlight, this would include any map apps that are open & their states. in AJAX, since there are no map apps like Twitter or Hyperlocal, it doesn’t include that info. You can also share the current state of the map just by copy & pasting the browser url.

      The embed is slightly different. In AJAX, it embeds just the viewport. In Silverlight, there is no global ‘embed everything’ option. So we decided to make one specifically for the Twitter app as we think there’s some fun / interesting use cases for it. The Bing Twitter embed contains similar information as on Bing Maps, but with a different UI styling. I totally agree that it would be great if you could embed the entire map with your choice of apps / params.

      Ravi