Bing Maps Concepts
(formerly Virtual Earth)
Mike Garza   
VEMaps@garzilla.net   

   
Click and drag pin to get started
Concept: Draggable Push Pins - Bing Maps v6.3

Bing Maps v6.3 is now available and one of the new features is something near and dear to me…Draggable Push Pins!! When I first created this site, one of the main features that I thought was missing from the Bing Maps Platform (then Virtual Earth) was draggable push pins. The first series of articles I wrote was how draggable push pins could be implemented on the Bing Maps Platform. Now, two and half years later, I am happy to see they this functionality is part of the core platform! So, in honor of that, I though it fitting to post an article about how draggable push pins are implemented with Bing Maps v6.3.

In the included example map, a push pin has been placed at the center of the map and dragging has been enabled on the push pin. To drag the pin, simply click on the pin and move it to the desired location. A label has been added below the map to indicate when the dragging events are fired.

Walk Through:

The first thing needed is a reference to the new 6.3 JavaScript Library. The reference is as follows:
    
    
Now that we have a reference to the new library, we can build out the map. The implementation of the map is as follows:
    function load() {
        //Create Map
        map = new VEMap('MapDiv');
        map.LoadMap();
        mapCenter = new VELatLong(41.8756, -87.9956)
        map.SetMapStyle(VEMapStyle.Shaded);
        map.SetMouseWheelZoomToCenter(false);
        map.SetCenterAndZoom(mapCenter, 9);
        
        // Create the pushpin and enable dragging
        pushPin = new VEShape(VEShapeType.Pushpin, mapCenter);
        pushPin.Draggable = true;
        
        // Assign the shape drag event handlers
        pushPin.onstartdrag = StartDragHandler;
        pushPin.ondrag = DragHandler;
        pushPin.onenddrag = EndDragHandler;
        
        // Show an info box to indicate the pushpin can be dragged.
        pushPin.SetTitle("Just click on the pin and drag away!!!");
        map.AddShape(pushPin);
    }
    
The first six lines of this function create the map in the typical fashion. Once the map has been created an instance of a VEShape, typed as a PushPin, is assigned to the variable “pushPin”. Next dragging is enabled on the push pin. This is accomplished by setting the “Draggable” property on the VEShape, pushPin, to true. That’s it! Simple…elegant.

Also added in v6.3 are some new events associated to the VEShape class. These events are “onstartdrag”, “ondrag” and “onenddrag”. These should be pretty self explanatory. To used these events, simply assign the name of the JavaScript function that should be executed when the event fires. In this code the JavaScript methods are “StartDragHandler”, “DragHandler” and “EndDragHandler”, respectively. The implementations of these handlers are as follows:
    function StartDragHandler(e) {
        document.getElementById("output").innerHTML = "Dragging started (onstartdrag event).";
    }
    
    function DragHandler(e) {
        document.getElementById("output").innerHTML = "Dragging in process (ondrag event).";
    }

    function EndDragHandler(e) {
        document.getElementById("output").innerHTML = "Dragging stopped (onenddrag event).";
    }
    
The code in these handlers simply update the text in the label “output” to reflect the current event being fired.

Wrap-up:

That’s pretty much all there is too it. The approach is pretty straight forward and easy to implement. The new events available allow you to apply the necessary business rules for a given event. Again, I am very pleased to see this functionality added as part of the core platform

As always, feedback, comments or questions are welcome. I look forward to hearing from you.

Return to Home Page

©2007-2017, Mike Garza, All Rights Reserved