Click on the map to place a marker and show longitude and latitude values.
<script type="text/javascript" src="http://dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0"></script>
<style>
#map-canvas{
border: 1px solid gray;
height: 400;
width: 600;
}
img{
padding:0px;
}
</style>
<script type="text/javascript">
var map = null;
var noPins = true;
function GetMap()
{
// Initialize the map
map = new Microsoft.Maps.Map(document.getElementById("map-canvas"),
{credentials:MyMapKeyGoesHere;});
// Add a handler for the map click event.
Microsoft.Maps.Events.addHandler(map, 'click', addPin);
// Add a handler to function that will grey out
// other pins in the collection when a new one is added
Microsoft.Maps.Events.addHandler(map.entities, 'entityadded', shadePins);
//Add handler for the map click event.
Microsoft.Maps.Events.addHandler(map, 'click', displayLatLong);
}
function displayLatLong(e) {
if (e.targetType == "map") {
var point = new Microsoft.Maps.Point(e.getX(), e.getY());
var loc = e.target.tryPixelToLocation(point);
document.getElementById("textBox").value= loc.latitude + ", " + loc.longitude;
}
}
function addPin(e) {
if (e.targetType == "map") {
var point = new Microsoft.Maps.Point(e.getX(), e.getY());
var loc = e.target.tryPixelToLocation(point);
var pin = new Microsoft.Maps.Pushpin(loc);
map.entities.push(pin);
}
}
function shadePins(e) {
if (noPins) {
// If there aren't yet any pins on the map, do not grey the pin out.
noPins = false;
}
else
{
var pin = null;
// Loop through the collection of pushpins on the map and grey out
// all but the last one added (which is at the end of the array).
var i = 0;
for (i = 0; i < e.collection.getLength() - 1; i++)
{
pin = e.collection.get(i);
pin.setOptions({ icon: "img/GreyPin.png" });
}
}
}
</script>
</head>
<body onload="GetMap();">
<h4>Bing Map with Geocoding</h4>
<p>Click on the map to place a marker and show longitude and latitude values.</p>
<div id='map-canvas' style="position:relative; width:400px; height:400px;"></div><br>
<b>Click the map to add a pushpin at that point. Latitude and longitude values will appear bellow.</b><br>
<input id='textBox' type="text" style="width:250px;"/>
</body>