Distance between two locations – Bing Maps

Hi Everyone,

Today I was working on Bing Maps and the requirement was there are some static locations and we have to calculate the distance between the draggable Pushpin and static locations.

Here is the full HTML of the same, please make sure that you replace BING-MAP-KEY with your 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=’divDistance’></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;
        var vLatitude = “17.53512546311542”;
        var vLongitude = “78.3292079101957”;
        // Pushpin Dragend event.
        function pushPinDragEndEvent(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;
                getDistanceBetweenLocations(location, new Microsoft.Maps.Location(vLatitude, vLongitude));
            }
        }
        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 = newMicrosoft.Maps.Map(document.getElementById(‘myMap’), { center: loc, zoom: zoomLevel });
            Events.addHandler(dragablePushpin, ‘dragend’, function (e) { pushPinDragEndEvent(‘pushpinDragEnd’, e); });
            map.entities.push(dragablePushpin);
            var pushpin = newMicrosoft.Maps.Pushpin(newLocation(vLatitude, vLongitude), {
                anchor: new Microsoft.Maps.Point(12, 39),
            });
            map.entities.push(pushpin);
        }
        // Calculate distance between two locations.
        function getDistanceBetweenLocations(Location1, Location2) {
            Microsoft.Maps.loadModule(‘Microsoft.Maps.SpatialMath’, function () {
                var vDistance = Microsoft.Maps.SpatialMath.getDistanceTo(Location1, Location2, Microsoft.Maps.SpatialMath.DistanceUnits.Miles);
                document.getElementById(‘divDistance’).innerHTML = “Distance in Miles : “ + vDistance;
            });
        }
    </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