What if you could embed a map on your website, blog or Facebook Page that shows all the local activity on Twitter relevant to your business?1
This real-time activity stream is a great way to show what real people are doing nearby, right now. Using this embedded Bing™ Twitter map, hotels, cities, and other types of businesses have an easy way to highlight nearby attractions and engage website visitors.
1 See Microsoft Bing™ Maps and MapPoint Web Service End User Terms of Use and Embedded Maps Service Terms of Use
Here are a few examples:
- Hotels - A hotel can embed a map with real-time Tweets of people enjoying nearby museums, amusement parks, restaurants, parks and more.
- Cities & Towns - A city or town can highlight events, monuments, restaurants, and other activities using this map on their website. Results can also be filtered based on keywords and Twitter usernames.
- Conferences & Events - Event planners can help attendees connect with each other and highlight nearby gatherings and meetups.
How-to Guide
This tutorial will show you how to easily embed a dynamic map on your website or blog that shows real-time Tweets from people in your area.
Click on the sections below for step-by-step instructions:
Step 1 - Launch the Bing™ Twitter Map App
The first step is to visit Bing™ Maps to set up your Bing™ Twitter map.
You'll want to make sure you go to the Silverlight version of Bing™ Maps so that you can launch the Bing™ Map Apps. Here is the URL: http://www.bing.com/maps/explore
Note: you only need Silverlight to configure the embeddable map. Your visitors can view the map whether they have Silverlight installed or not.
Launch Bing™ Map Apps
Next, click on the Map Apps button and select the Twitter Maps app.
Select the Twitter Maps App
Click Step 2 below to see how to configure it:
Step 2 - Configure It
Now you can configure your map centering it on your Location, and by adding Keywords or People that you want to see Tweets from. These act as "filters" on the Tweets that will be displayed on your map.
Click on the Search Filters link to display the entry fields.
The Bing™ Twitter Map App
If you only want to show Tweets from certain Twitter users, you can put their Twitter usernames in the People field. Same thing for Keywords or Location.
Adding Search Filters
Once you have the map looking how you want it, click on the Embed in your site link in the lower left area of the screen.
Getting the embed code
Click Step 3 below to see how to grab the embed code:
Step 3 - Paste Embed Code Into Your Website
This will bring up the Embed window. From here you can configure the width and height of your map, and get the HTML code to paste into your website. Select and copy the embed code to your clipboard.
Change map dimensions and copy embed code
Now go to your website, and paste the embed code into the page that you want to display the map on. You can paste this into to any blog post or HTML page.
Paste the embed code into your website
Now view your page - you should see a map of your location, with nearby Tweets!
Website with embedded map
If you're using Wordpress, Joomla, Drupal, BlogEngine.net, DotNetNuke, or ScrewTurn Wiki, you can get more detailed instructions and how-to videos by visiting the Code Snippet Embedding Tutorial.
Note: Your visitors will get an enhanced experience if they have Silverlight installed. But the map will still work without it.
Run Your Apps on the Microsoft Web Platform
Links to other resources:
