Pushpin tooltips in Bing Maps V7

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.
image

Advertisements

9 thoughts on “Pushpin tooltips in Bing Maps V7

    • 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.

  1. Dude ~ you rock. I had the basic idea, but your solution did the trick. THANKS for helping out.
    (P.s. turned out to be a single-vs-double quote in javascript… . Your code spotlighted that. :)

  2. Thanks for this post. It lead me in the right direction. But beside to set a unique class for any pin you can also set the id of a pin.

    The following worked for me:
    var pin = new Microsoft.Maps.Pushpin(center, { id: ‘pin1’ });

    $(‘#pin1’).children().attr(‘title’,’This is pin 1.’);

    Maybe this is more clean and efficient.

  3. Hi Ricky,

    Thank you, quite belatedly, for this! This works fantastically in version 7. At this time, version 8 is still in preview, but any ideas on how we will be able to efficiently do this for many pushpins in a single layer using Bing Maps V8?

    Thanks,

    Ken

    • V7 rendered data by creating DOM elements on the page. The solution provided in this blog post is a bit of a hack as it directly modifies the DOM element. In V8 all data is rendered directly on an HTML5 canvas as this provides an order of magnitude improvement in performance and in the amount of data we can render on the map. To create a tooltip in V8 you will need to use the mouseover/mouseout events and display a custom infobox.

      • The infobox as tooltip approach works great! Only took a few minutes to implement. Thank you so much!

        Ken

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