Google maps with javascript and json

My script will show the distance from you and a city. I put each city lat and long in a json but I don’t know how to loop through all those items to show me that I am closer to ny or seattle. In this mom the script shows only the distance from you and another location. I put in comments seattle and ny. I dond’t know how to bring in ourCoords from var km = computeDistance(position.coords, ourCoords); just one value, form a nested loop that will go through json. This value will be compared with position.coords and will calculate the smallest distance from you and seattle, for example.

HMTL:

<div id="location">
Your location will go here.
</div>
<div id="distance">
Distance from Company will go here.
</div>
<div id="map">
</div>

This will go in head

JS:

    window.onload = getMyLocation;

var ourCoords =  {
    latitude: 47.624851,
    longitude: -122.52099
};

// var ourCoords = {
//     "seattle": [{"latitude" : 47.624851, "longitude": -122.52099}],
//     "new york": [{"latitude" : 48.624851, "longitude": -122.54099}]
    
    
// }

function getMyLocation() {
    // check if the browser supports Geolocation API
    if (navigator.geolocation) {
        // we call the getCurrentPosition method and pass in a handler function, displayLocation
        navigator.geolocation.getCurrentPosition(displayLocation, displayErrors);
    } else {
        alert("No geolocation support by your browser!");
    }
}


// Function called when the browser has a location
// position contains the latitude and longitude of your location
function displayLocation(position) {
    // grab the latitude and longitude of your location from the position object and his .coords property
    var latitude = position.coords.latitude;
    var longitude = position.coords.longitude;

    var div = document.getElementById("location");
    div.innerHTML = "You are at Latitude: " + latitude + ", Longitude: " + longitude;

    var km = computeDistance(position.coords, ourCoords);
    var distance = document.getElementById("distance");
    distance.innerHTML = "You are " + km + " km from our Company";

    showMap(position.coords);
}


// Handler which is passed an error by the Geolocation API
function displayErrors(error) {
    var errorTypes = {
        0: "Unknown error",
        1: "Permision denied by user",
        2: "Position is not available... ",
        3: "Request timed out"
    };

    // using the error.code property, we assign one of those strings(0, 1, 2, 3) to a new variable, errorMessage
    var errorMessage = errorTypes[error.code];

    // In the case of errors zero and two, there is sometimes additional information in the error.message property, so we add that to our errorMessage string
    if (error.code == 0 || error.code == 2) {
        errorMessage = errorMessage + " " + error.message;
    }
    var div = document.getElementById("location");
    // we add the message to the page to let the user know
    div.innerHTML = errorMessage;
}


// This function takes two coordinates, a start coodinate and a destination coordinate, and returns the distance in kilometers between them
function computeDistance(startCoords, destCoords) {
    var startLatRads = degreesToRadians(startCoords.latitude);
    var startLongRads = degreesToRadians(startCoords.longitude);
    var destLatRads = degreesToRadians(destCoords.latitude);
    var destLongRads = degreesToRadians(destCoords.longitude);

    // radius of the Earth in km
    var Radius = 6371; 
    var distance = Math.acos(Math.sin(startLatRads) * Math.sin(destLatRads) +
        Math.cos(startLatRads) * Math.cos(destLatRads) * 
        Math.cos(startLongRads - destLongRads)) * Radius;

    return distance;
}


function degreesToRadians(degrees) {
    var radians = (degrees * Math.PI)/180;
    return radians;
}

var map;
function showMap(coords) {
    var googleLatAndLong = new google.maps.LatLng(coords.latitude,coords.longitude);
    var mapOptions = {
        zoom: 10,
        center: googleLatAndLong,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    var mapDiv = document.getElementById("map");
    map = new google.maps.Map(mapDiv, mapOptions);

    // add the user marker
    var title = "Your Location";
    var content = "You are here: " + coords.latitude + ", " + coords.longitude;
    addMarker(map, googleLatAndLong, title, content);
}

function addMarker(map, latlong, title, content) {
    var markerOptions = {
        position: latlong,
        map: map,
        title: title,
        clickable: true
    };
    var marker = new google.maps.Marker(markerOptions);

    var infoWindowOptions = {
        content: content,
        position: latlong
    };

    var infoWindow = new google.maps.InfoWindow(infoWindowOptions);

    google.maps.event.addListener(marker, 'click', function() {
        infoWindow.open(map);
    });
}

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.