Click Custom Pushpin

How Do You Add A Custom Pushpin

Answer this question

Click Custom Pushpin

Dawa Tsering
This is the code I am testing this out with and it will not work. Do you know what is wrong in the code making it so it dont work

<script src="http://dev.virtualearth.net/mapcontrol0u118 3/mapcontrol.js"></script>< xml:namespace prefix = o ns = "urn:schemas-microsoft-com:office:office" />

<script>

            var map = null;

            var pinID = 1;

            var directions = null;

            function GetMap()

      {

            map = new VEMap('myMap');

            map.LoadMap(new VELatLong(42.75108, -84.56652), 8, 'r', false);

            AddPin();

      }

function CreatePin(pinID)

{

// Create your pin

var pin = new VEPushpin(pinID,

new VELatLong(54.564, 54.5646),

'', 'Company name, 'INFO THERE');

map.AddPushpin(pin);

// Assign an data against the element

document.getElementById(pinID).data = 'VALUE';

// Add event handler to the element itself

document.getElementById(pinID).onclick=HandleEventPinClick;

// Ready to receive onclick events

}

function HandlePinEventClick(e)

{

// All browsers will receive this event

var textField = document.getElementById('txtFinish');

textField value = 'Some data';

// However if you want the data to come from the PIN then you need

// to use, e.currentTarget which only works with mozilla

textField value = e.currentTarget.data;

}

function CreatePin(pinID)

{

// Create your pin

var pin = new VEPushpin(pinID,

new VELatLong(54.8247, 54.6844),

'', 'Company name, 'INFO THERE');

map.AddPushpin(pin);

// Assign an data against the element

document.getElementById(pinID).data = 'VALUE';

// Add event handler to the element itself

document.getElementById(pinID).onclick=HandleEventPinClick;

// Ready to receive onclick events

}

function HandlePinEventClick(e)

{

// All browsers will receive this event

var textField = document.getElementById('txtFinish');

textField value = 'Some data';

// However if you want the data to come from the PIN then you need

// to use, e.currentTarget which only works with mozilla

textField value = e.currentTarget.data;

}

</script>

<body onload="GetMap();">

<div id='myMap' style="position:center; width:705px; height:500px;"></div>

   </head>

THANKS!
Steev
vab
I'm sorry, for some reason it is just not working for me..
Toby Broom
I have the code in there like posted above.. do you know why it is not working Thanks

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<script src="http://dev.virtualearth.net/mapcontrol0u118 3/mapcontrol.js"></script>

<html>

<head>

<script>

var map = null;

var pinID = 1;

function GetMap()

{

map = new VEMap('myMap');

map.LoadMap(new VELatLong(42.75108, -84.56652), 8, 'r', false);

AddPin();

}

function CreatePin(pinID)

{

var pin = new VEPushpin(pinID,

new VELatLong(54.564, 54.5646),

'', 'Company name, 'INFO THERE');

map.AddPushpin(pin);

document.getElementById(pinID).data = 'VALUE';

document.getElementById(pinID).onclick=HandleEventPinClick;

}

function HandlePinEventClick(e)

{

var textField = document.getElementById('txtFinish');

textField value = 'Some data';

textField value = e.currentTarget.data;

}

{

var pin = new VEPushpin(pinID,

new VELatLong(58.254, 55.6547),

'', 'Company name, 'INFO THERE');

map.AddPushpin(pin);

document.getElementById(pinID).data = 'VALUE';

document.getElementById(pinID).onclick=HandleEventPinClick;

}

function HandlePinEventClick(e)

{

var _u101 xtField = document.getElementById('txtFinish');

textField value = 'Some data';

textField value = e.currentTarget.data;

}

}

function FindDir()

{

map = new VEMap('myMap');

map.LoadMap();

var _u111 = document.gePu69 lementById('txtStart').value;

var from = document.getElementById('txtFinish').value;

map.GetRoute(to,from,null,null,onGotRoute);

}

function onGotRoute(route)

{

var routeinfo="Route info:<br><br>";

routeinfo+="Total distance: ";

routeinfo+= route.Itinerary.Distance+" ";

routeinfo+= route.Itinerary._istanceUnit+"<br>";

var steps="";

var len = route.Itinerary.Segments.length;

for (var i =0; i < len; i ++)

{

steps+=route.Itinerary.Segments[ i ].Instruction

steps+=route.Itinerary.Segments[ i ].Distance

steps+=route.Itinerary.DistanceUnit+"<br>";

}

routeinfo+="Steps:<br>"+steps;

document.getElementByID('drivingDirections').innerHTML = routeInfo;

}

</script>

</head>

<body onload="GetMap();">

<div id="myMap" sayle="position:relative; width:705px; height:505px;"></div>

Origin: <INPUT id="txtStart" type="text" name="txtStart">

Destination: <INPUT id="txtFinish" type="text" name="txtFinish">

<INPUT id="getdir" type="button" value="Get Directions" name="getdir" onclick="FindDir();">

<div id="drivingDirections" style="position:relati€u101 ; width:705px; height:160px;"></div>

</body>

</html>
chenge

function CreatePin(pinID)
{
// Create your pin
var pin = new VEPushpin(pinID,
new VELatLong(54.564, 54.5646),
'', 'Company name, 'INFO THERE');

map.AddPushpin(pin);

// Assign an data against the element
document.getElementById(pinID).data = 'VALUE';

// Add event handler to the element itself
document.getElementById(pinID).onclick=HandleEventPinClick;

// Ready to receive onclick events
}

function HandlePinEventClick(e)
{
// All browsers will receive this event
var textField = document.getElementById('txtFinish');
textField value = 'Some data';

// However if you want the data to come from the PIN then you need
// to use, e.currentTarget which only works with mozilla
textField value = e.currentTarget.data;
}

Hope this helps!
Kevin J Baird
I am replying today to a post entry made several months ago...I hope someone sees this reply 'cause I need help. This code above does not result in the display of the 2 pushpins; only the map. I am pursuing the challenge of adding an event handler for the click of a pushpin on the VE map. I've tried the above code with both

<script src="http://dev.virtualearth.net/mapcontrol/v4/mapcontrol.js" type='text/javascript'></script>

and with:

<script src="http://dev.virtualearth.net/mapcontrol/v3/mapcontrol.js" type='text/javascript'></script>

both show the map with no pushpins at all (let alone a "clickable" pushpin). Has anyone come up with a good example of how to program for a clickable pushpin
russlunn
Hello!
How could I detect in HandlePinEventClick which pushbutton was clicked
james_cline_
As the VE API does not by default provide certain desired functionality
you need to get access to those objects (PINS) and treat them as DOM elements.
What happens is that when you perform map.AddPushpin the new pin becomes part
of your document DOM tree structure.

You then use document.getElementById from the DOM API to get access to that
base dom element methods and events.

Your new code should look like:

<script src="http://dev.virtualearth.net/mapcontrolOv3/mapcontrol.js"></script>
<script>

var map = null;
var pinID = 1;
var directions = null;

function GetMap()
{
map = new VEMap('myMap');
map.LoadMap(new VELatLong(54.65468, -86.3552), 8, 'r', false);

AddPin();
}

// Wrap the existing API with the new version
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)
{
// Put your code that deals with the event here

// From your original question i can presume the text INPUT txtFinish
// To get the data from the element however is not standard
// accross browsers - below example works fine in Firefox but
// not MS IE as e.currentTarget doesn't work use srcElement
// instead but again not that strait forward as MS IE also does
// not have e in the events - use window.event

// var textField = document.getElementById('txtFinish');
// textField value = e.currentTarget.data;
}

function AddPin()
{
var pos1 = new VELatLong(44.5548787, -89.145484);
var pos2 = new VELatLong(44.574587, -89.6784);
AddClickablePin(pos1, '', 'Company Here', 'Address Here');
AddClickablePin(pos2, '', 'Company Here', 'Address Here');
}

</script>

<body onload="GetMap();">
<div id='myMap' style="position:center; width:705px; height:500px;"></div>
</head>
Click Custom Pushpin

Answer this question