In recent months I’ve had a couple of customers ask how to add a simple tooltip to a pushpin in Bing Maps. It sounds like a simple enough task but there is a bit of a trick to get it to work in a supported way. Looking at the Pushpin class and Pushpin options in Bing Maps there is no option for a tooltip so we have to take a look at what we do have available to us. In the pushpin options we have a property called typeName. This property allows us to set a class name to a pushpin. Now this gives us the ability to assign a unique identifier to the pushpin that is rendered. By creating a unique class name for each pushpin you can then set a tooltip value to the pushpin by retrieving the pushpin DOM object by class name. Now retrieving a DOM object by class name is a bit tricky as not all browsers have a nice simple method for this. To make things easier, jQuery can be used as it is has cross browser support for this. Once we retrieve a DOM object by class name the tooltip can be set by setting the “title” attribute. Putting this all together we end up with the following example:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <title></title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <script type="text/javascript" src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0"></script> <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.6.2.min.js"></script> <script type="text/javascript"> var map = null; function GetMap() { // Initialize the map map = new Microsoft.Maps.Map(document.getElementById("myMap"), {credentials:"Your Bing Maps Key"}); // Retrieve the location of the map center var center = map.getCenter(); // Add a pin to the center of the map var pin = new Microsoft.Maps.Pushpin(center, {typeName: "pin1"}); map.entities.push(pin); //Get the pushpin DOM object by class name and set the Title attribute. $('.pin1').children().attr('title','This is pin 1.'); } </script> </head> <body onload="GetMap();"> <div id='myMap' style="position:relative; width:400px; height:400px;"></div> </body> </html>
When you run the code you will end up with a map that looks like the following. When you hover over the pushpin you will see the tooltip.
#1 by Farhan on October 4, 2012 - 10:40 am
How this can be done in Windows store app ?
#2 by rbrundritt on October 4, 2012 - 12:01 pm
In Windows 8 you will likely want to avoid tooltips as they won’t work if the user is using a touch device. You can use the infobox control if you wanted and attach a touch event to it.