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);
}

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 puteDistanceBetween 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!

• javascript
• google-maps
• google-maps-api-3
• geolocation

• Can you provide a Minimal, Complete, Tested and Readable example? Do you want the straight line (as the crow flies) distance, or the driving distance? A sample of the XML would be useful, as well as an example of how you are calling the functions in your posted code. – geocodezip Commented Nov 16, 2014 at 15:27

1 Answer 1

1. You need to load the geometry library

   http://maps.googleapis./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 pute this distance, call puteDistanceBetween() 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.puteDistanceBetween(a,b);

distance will be the distance in meters.