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.

<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&#8217; 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

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s