CODEWITHSUNDEEP
javascriptonclickbing-maps
antpaw
antpaw

Reputation: 15985

Bing Maps Click Event on a Pin

How can i setup a callback function for a click event on a pin? I need both pins the green one (one location) and the red one (clustered locations). I'm using the v6 api.

That's the code so far:

var shape = new VEShape(VEShapeType.Pushpin, new VELatLong(pin.position.lat, pin.position.lng));
shape.SetTitle('<h2>'+pin.overlay.headline+'</h2>');
shape.SetDescription('<p>'+pin.overlay.text+'</p>');

var pinIcon = new VECustomIconSpecification();
pinIcon.Image = '/images/map/pin.png';
pinIcon.TextContent = '.';
shape.SetCustomIcon(pinIcon);

Upvotes: 1

Views: 4130

Answers (2)

R Baker
R Baker

Reputation: 46

The correct way to do this is to override the onclick and onmouseover functions within VEMap.AttachEvent(); AttachEvent has many return values useful in identifying which pin you click/mouseover, such as the pinID (elementID return value for the VEMap.onclick() method).

You can use the ID in combination with map.ShowInfoBox(), and map.GetShapeByID to show your infobox upon click.

READ: VEMap.AttachEvent <-- Google that, I'd paste the URL but I need more rep on StackOverflow

READ: VEMap.onclick. Also, Understand the return values:

READ All mouse events http://msdn.microsoft.com/en-us/library/bb412438.aspx

/*************************************
 * Code snippets..
 * For example purposes I'm going to do 
 * things a bit out of order.
*************************************/

// Attach your events in the map load callback:
map.AttachEvent("onmouseover", myFnForMouseOver);
map.AttachEvent("onclick", myFnForOnClick);


// Callback functions used in the AttachEvent(s) above..
function myFnForMouseOver(e){
    if(e.elementID){
        return true; // Disables the rollover ShowInfoBox()
    }
}

function myFnForOnClick(e){
    if(e.elementID){
        // Show infobox using the PINs/Shapes actual ID, (return value from e.elementID)
        map.ShowInfoBox(map.GetShapeByID(e.elementID)); 
        return true;
    }
}

/*
 * end 
 */

Thats it

  • R Baker

Upvotes: 3

Oren Trutner
Oren Trutner

Reputation: 24208

You are not limited to setting just the text and image of a pin -- you can use the CustomHTML property to specify it as an HTML element. That allows you to handle clicks or any other events on it.

A simple example would have an HTML pin image with an inline click handler:

pinIcon.CustomHTML = "<img onclick='alert(\"tadaa\")' src='/images/map/pin.png' />";

If you are separating code from markup, e.g. using jQuery, you can specify the pin's element ID, and use that later to associate a click handler with it. For example:

pinIcon.CustomHTML = "<img id='pin' src='/images/map/pin.png' />";
shape.SetCustomIcon(pinIcon);
...
map.AddShape(shape);
$("#pin").click(function() { alert("tadaa"); });

Upvotes: 3

Related Questions