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');
}
Advertisement
This entry was posted in Bing Maps and tagged . Bookmark the permalink.

1 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!

Comments are closed.