Missing Infobox

The new control has a few missing features compared to the previous version. In particular there is no longer an infobox that pops up when you hover the mouse over a pushpin. This is part of the streamlining of the control. If you want to add facilities to the control there are a range of options. You can draw on the map using the Pushpin, Polyline and Polygon objects or you can use HTML to add DOM objects to the map container.

Adding the a basic popup info box is a good exercise in adding event handlers and making the connection between the map and the HTML DOM it is part of.

To add a popup box to a Pushpin you first have to attach two event handlers to the pin:

Microsoft.Maps.Events.addHandler(
           pin,'mouseover',doPopup);
Microsoft.Maps.Events.addHandler(
           pin, 'mouseout', removePopup);

The doPopup event handler simply creates a Div with the text you want to display and sets its position to the same location as the pin. To do this we need to use the tryLocationToPixle method to convert the geo-co-ordinates of the pin to pixel co-ordinates used by HTML:

function doPopup(e)
{
 var point=map.tryLocationToPixel(
 e.target.getLocation(),
 Microsoft.Maps.PixelReference.control
);

The point object is another useful utility object introduced with the new control.

Next we create the div and add it to the map container:

 var popupDiv=document.createElement("div");
 popupDiv.id="MyPopup";
 popupDiv.style.left = point.x;
 popupDiv.style.top = point.y;
 popupDiv.style.position="absolute";
 popupDiv.style.backgroundColor="White";
 popupDiv.style.zindex="100";
 popupDiv.innerHTML="Hello popup";
 var mapContainer = 
       document.getElementById('myMap');
 mapContainer.appendChild(popupDiv);
}

Notice that in a real example you would assign a class to the Div and customise it using CSS. 

Now when you pass the mouse over the pin the Div appears. To make it go away when the mouse moves off the pin we need to code the second event handler:

function removePopup(e){
 var mapContainer = document.
                  getElementById('myMap');
 var popupDiv = document.
                  getElementById('MyPopup');
 if (popupDiv != null) {
   mapContainer.removeChild(popupDiv); }
}

Apart from the conversion between the two co-ordinate systems this is all pure Javascript DOM manipulation and you can extend the method to do almost anything with the map display.

Conclusion

Working with the map control is just a matter of figuring out which methods and properties affect the feature you are trying to control. You can do most of the things that a Bing Maps user can including planning a route and finding locations but you might have to use REST or some other interface to achieve the result - the V7 control is much more lightweight than previous controls.

In most cases extending Bing Maps is a matter of adding shapes, objects and other graphics at various locations. In some cases you might want to add a more advanced facility and in this case it helps to remember that the map control and all its auxiliary objects are just JavaScript/DOM objects as used in the Spartan Ajax approach to building applications.

The iProgrammer team has a number of experts available to help with mapping projects including geostatistics and data. Contact the editor  if you would like to suggest a topic for a more advanced project or tutorial.

<ASIN:0321525590>

<ASIN:1934356069> 

<ASIN:2746052989>

<ASIN:1593272715>