1

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);

2 Answers 2

3

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
0
3

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"); });

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.