Make virtual earth infobox appear on click instead of hover?

Question

Is it possible to make Virtual Earth pushpin infobox display respond from onclick instead of mouseover?

Currently I'm using something like this:

...

  var pin = new VEShape(
                  VEShapeType.Pushpin,
                  [location]
                );
  pin.SetCustomIcon(icon_url);
  pin.SetTitle(title);
  pin.SetDescription(info_window_template);
  map.AddShape(pin);

  document.getElementById(pin.GetPrimitive().iid).onmouseover = EventHandlerOnMouseOver;
}

var EventHandlerOnMouseOver = function(e) {
    // Handle content loading...
}

...

However, if I attempt to change the onmouseover to onclick, VE picks up onclick and disables the infobox entirely.

Answer 1

You can accomplish what describing through the use of events... note that I'm using Virtual Earth 6.2.

The trick is to suppress the onmouseover event and the subscribe to the onclick event. When you have figured out if the user clicked on a shape or not you can call the ShowInfoBox method on the map control to force it to show the info box.

And here is teh codez =)

// Begin by supressing the onmouseover event. Returning true 
// from an event handler disables the default Virtual Earth action
map.AttachEvent('onmouseover', function(e) { if(e.elementID) return true; });

// Subscribe to the onclick event and react whenever we get an element id
map.AttachEvent("onclick", function(e) {

    // elementID is null when someone clicks on the map and not on a shape
    if(e.elementID) {

        var shape = map.GetShapeByID(e.elementID); 
        if(shape) map.ShowInfoBox(shape);
    } 
});

Note that the infobox will show even if you right click on the shape; to avoid this you would look at the leftMouseButton or rightMouseButton properties on the event object.

References:

• VEMap.onclick Event
• VEMap.onmouseover Event