Drag Pushpin on Bing Map - JavaScript
Hi,
Today, we have got some requirement where the users should be able to drag the Pin on the Map and we should get the Latitude and Longitude of that position.
We have to use "dragend" event for it.
Here is the full html of the same. Just replace BING-MAP-KEY with your Bing Map Key.
Hope this helps.
--
Happy Coding
Today, we have got some requirement where the users should be able to drag the Pin on the Map and we should get the Latitude and Longitude of that position.
We have to use "dragend" event for it.
Here is the full html of the same. Just replace BING-MAP-KEY with your Bing Map Key.
<html>
<head>
<title>Drag Pushpin</title>
<meta http-equiv='Content-Type' content='text/html; charset=utf-8' />
<style type='text/css'>
body {
margin: 0;
padding: 0;
overflow: hidden;
font-family: 'Segoe UI',Helvetica,Arial,Sans-Serif;
}
</style>
</head>
<body>
<div id='printoutPanel'></div>
<div id='divLatitudeUp'></div>
<div id='divLongitudeUp'></div>
<div id='myMap'></div>
<script type='text/javascript' src='https://www.bing.com/api/maps/mapcontrol?key=BING-MAP-KEY&callback=loadMapScenario' async defer></script>
<script type='text/javascript'>
var zoomLevel = 10;
var map;
function handleArgs(id, e) {
var point = newMicrosoft.Maps.Point(e.getX(), e.getY());
var loc = e.target.getLocation();;
var location = newMicrosoft.Maps.Location(loc.latitude, loc.longitude);
if (id == "pushpinDragEnd") {
document.getElementById("divLatitudeUp").innerHTML = "Latitude : " + loc.latitude;
document.getElementById("divLongitudeUp").innerHTML = "Longitude : " + loc.longitude;
}
}
function loadMapScenario() {
var map = newMicrosoft.Maps.Map(document.getElementById('myMap'), { zoom: zoomLevel });
var center = map.getCenter();
var Events = Microsoft.Maps.Events;
var Location = Microsoft.Maps.Location;
var Pushpin = Microsoft.Maps.Pushpin;
var loc = newLocation(center.latitude, center.longitude);
var dragablePushpin = new Pushpin(loc, { color: '#00F', draggable: true });
map = new Microsoft.Maps.Map(document.getElementById('myMap'), { center: loc, zoom: zoomLevel });
Events.addHandler(dragablePushpin, 'dragend', function (e) { handleArgs('pushpinDragEnd', e); });
map.entities.push(dragablePushpin);
}
</script>
</body>
</html>
Hope this helps.
--
Happy Coding
Gopinath
*This post is locked for comments