Bing Maps add tooltip to pushpin

On a project that utilizes the Bing Maps API v7 to display a few points of interest I wanted to add a mouse over tooltip in order to improve the user experience.  This can be done if you add an info box to the tooltip; however in this project it was not needed.

Below is a code snippet.  What the code does is this:

  1. Load Bing Map
  2. Adds a push Pin to the map with a class name of “ThisIsAClassName”
  3. Use jQuery’s class selector to find the pin and add the title attribute.
function LoadPushPin()
{
// Initialize the map
var map = new window.Microsoft.Maps.Map(document.getElementById('myMap'),
{
    credentials: :"Your Bing Maps Key",
    mapTypeId: window.Microsoft.Maps.MapTypeId.birdseye,
    center: new window.Microsoft.Maps.Location(26.275929944300522, -81.73840463161469),
    zoom: 12,
    width: 620,
    height: 500,
    theme: new window.Microsoft.Maps.Themes.BingTheme()
});

var pin = new Microsoft.Maps.Pushpin(new window.Microsoft.Maps.Location(26.275929944300522, -81.73840463161469), {typeName: "ThisIsAClassName"}); 
map.entities.push(pin);

//Set the title property of the image of the pushpin
$('.ThisIsAClassName').children('img').attr('title','This is a mouse over');
}
Advertisements
This entry was posted in Bing Maps and tagged . Bookmark the permalink.

One Response to Bing Maps add tooltip to pushpin

  1. magic mesh says:

    Greetings! Very helpful advice within this article!
    It’s the little changes that make the greatest changes. Many thanks for sharing!

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s