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:
- Load Bing Map
- Adds a push Pin to the map with a class name of “ThisIsAClassName”
- 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'); }
Greetings! Very helpful advice within this article!
It’s the little changes that make the greatest changes. Many thanks for sharing!