Export (0) Print
Expand All

Customizing Your Pushpins

Bing

The Bing Maps AJAX Control, Version 7.0 provides flexible pushpin functionality. Use options provided in the PushpinOptions Object to customize your pushpins.

This topic describes how to customize your pushpin icon as well as how to create a pushpin info box.

Customizing Your Pushpin Icon

If you do not want to use the default pushpin icon, you can set the icon property of the PushpinOptions to the image you want to use instead.

This example uses the image below, named “BluePushpin.png”, as the pushpin icon.

Blue pushpin

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

         var map = null;         

         function GetMap()
         {
            // Initialize the map
            map = new Microsoft.Maps.Map(document.getElementById("myMap"),
                         {credentials:"Bing Maps Key"}); 

            // Retrieve the location of the map center 
            var center = map.getCenter();
            
            // Add a pin to the center of the map, using a custom icon
            var pin = new Microsoft.Maps.Pushpin(center, {icon: 'BluePushpin.png', width: 50, height: 50, draggable: true}); 

            map.entities.push(pin);
         }

      </script>
   </head>
   <body onload="GetMap();">
      <div id='myMap' style="position:relative; width:400px; height:400px;"></div>       
   </body>
</html>

Creating a Pushpin Infobox

The Bing Maps AJAX Control, Version 7.0 has built-in pushpin info box functionality which you can customize to suit the needs of your application. To create an info box, use the Infobox and InfoboxOptions types.

The example below shows how to display an info box when a pushpin is clicked.

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

         var map = null; 
         var pinInfobox = null;        

         function GetMap()
         {
            // Initialize the map
            map = new Microsoft.Maps.Map(document.getElementById("myMap"), {credentials:"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, {text: '1'}); 

            // Create the infobox for the pushpin
            pinInfobox = new Microsoft.Maps.Infobox(pin.getLocation(), 
                {title: 'My Pushpin', 
                 description: 'This pushpin is located at (0,0).', 
                 visible: false, 
                 offset: new Microsoft.Maps.Point(0,15)});

            // Add handler for the pushpin click event.
            Microsoft.Maps.Events.addHandler(pin, 'click', displayInfobox);

            // Hide the infobox when the map is moved.
            Microsoft.Maps.Events.addHandler(map, 'viewchange', hideInfobox);


            // Add the pushpin and infobox to the map
            map.entities.push(pin);
            map.entities.push(pinInfobox);

         }

         function displayInfobox(e)
         {
            pinInfobox.setOptions({ visible:true });
         }                    

         function hideInfobox(e)
         {
            pinInfobox.setOptions({ visible: false });
         }
      </script>
   </head>
   <body onload="GetMap();">
      <div id='myMap' style="position:relative; width:500px; height:500px;"></div>
   </body>       
</html>
Show:
© 2014 Microsoft