CODEWITHSUNDEEP
javascriptgoogle-mapsgoogle-maps-api-3geolocation
Jack Harteveld
Jack Harteveld

Reputation: 3

Using computeDistanceBetween to work out the distance between the user's current location and a fixed point

I'm currently trying to code a simple web-app prototype for one of my university projects. I'm fairly new to Javascript and I'm having some trouble.

I've created a map that drops a marker at the user's current location, and a marker at a fixed point. Here is the Javascript so far:

var map;

function load() {
    var myOptions = {
        zoom: 14,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    map = new google.maps.Map(document.getElementById("map"), myOptions);
    navigator.geolocation.getCurrentPosition(displayOnMap);
}

var pin;

function displayOnMap(position) {
    var latitude = position.coords.latitude;
    var longitude = position.coords.longitude;
    var initialLocation = new google.maps.LatLng(latitude, longitude);
    map.setCenter(initialLocation);
    var marker = new google.maps.Marker({
        map: map,
        position: initialLocation,
    });
    loadMarkers();
}

function loadMarkers() {
    var xmlMarkersRequest = new XMLHttpRequest();
    xmlMarkersRequest.onreadystatechange = function() {
        if (xmlMarkersRequest.readyState === 4) {
            var xml = xmlMarkersRequest.responseXML;
            var markersArray = xml.documentElement.getElementsByTagName("marker");
            for (var i = 0; i < markersArray.length; i++) {
                var id = Number(markersArray[i].getAttribute("id"));
                var latitude = markersArray[i].getAttribute("latitude");
                var longitude = markersArray[i].getAttribute("longitude");
                var point = new google.maps.LatLng(
                    parseFloat(latitude),
                    parseFloat(longitude));
                var marker2 = new google.maps.Marker({
                    map: map,
                    position: point,
                    zIndex: id
                });
            }
        }
    }
    xmlMarkersRequest.open('GET', 'markers.xml', false);
    xmlMarkersRequest.send(null);
}

Everything here works exactly how I want it to.

I'm just not sure how to use computeDistanceBetween to return the distance between the user's initial location (initialLocation), and the location of the marker.

The marker information is stored in an XML file because originally I planned to add more than one. But my site only needs one marker, so it's not a problem if I have to write the fixed marker's information into the Javascript instead.

I hope this question makes sense!

Upvotes: 0

Views: 2785

Answers (1)

MrUpsidown
MrUpsidown

Reputation: 22486

  1. You need to load the geometry library

    http://maps.googleapis.com/maps/api/js?key=YOURKEY&libraries=geometry

  2. The distance between two points is the length of the shortest path between them. This shortest path is called a geodesic. On a sphere all geodesics are segments of a great circle. To compute this distance, call computeDistanceBetween() passing it two LatLng objects.

Example:

var a = new google.maps.LatLng(0,0);
var b = new google.maps.LatLng(0,1);
var distance = google.maps.geometry.spherical.computeDistanceBetween(a,b);

distance will be the distance in meters.

Upvotes: 8

Related Questions