My user likes the way the pushpin hover looks, but they want it done on the click of the pushpin instead of on the hover (along with different data that I'm Ajaxing in).
I know I've seen this code someplace, but can't find it now. I have the OnClick working, I'm just not sure how to create the div. John, I've seen your 'Virtual Earth Popup Styles', but am not sure how to put it in play.
Thanks in advance...Steve
Hover functionality on Pushpin click
Wildmind
John.
Sergio.Rykov
If I would have looked a bit more I might have found Dr. Neil's article which got me close enough to figure the rest of it out.
http://www.viavirtualearth.com/MyVirtualEarth/v3/dynamicpushpin.htm
Mirific201201
I had this on my to do anyway, its annoying that if you click on a pin it stops the mouseover from displaying.
http://www.soulsolutions.com.au/onclick.html
Credit to hafi and sanderson1000 .
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>OnClick Example</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="http://dev.virtualearth.net/mapcontrol/v3/mapcontrol.js"></script>
<script type="text/javascript">
var map = null;
var pinID = 1;
function GetMap()
{
map = new VEMap('myMap');
map.LoadMap(new VELatLong(47.6, -122.33), 10 ,'h' ,false);
AddClickablePin(new VELatLong(47.6, -122.33),null,"test","some nice details")
}
function AddClickablePin(location, icon_url, title, details)
{
var pin = new VEPushpin(pinID, location, icon_url, title, details);
map.AddPushpin(pin);
var element = document.getElementById(pinID);
element.onclick = EventHandlerOnClick;
element.data = details;
pinID++;
}
function EventHandlerOnClick(e)
{
if (e!=null)
{
document.getElementById(e.currentTarget.id + "_" + map.GUID).onmouseover();
} else
{
document.getElementById(window.event.srcElement.id).onmouseover();
}
}
</script>
</head>
<body onload="GetMap();">
<div id='myMap' style="position:relative; width:800px; height:800px;"></div>
</body>
</html>
John.