I am interested in knowing how I can calculate the distance between my current location and a marker on the map, taking into account the curvature of the earth. Below is my JavaScript code:
var map;
function initMap(){
//constructor creates a new map - only center and zoom are required
map = new google.maps.Map(document.getElementById('map'),{
center: {lat: 45.325187, lng: -66.2113336},
zoom: 11,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var markers = [];
var locations = [
{title: 'Ethan House', location:{lat: 45.3631979, lng: -66.2118715}},
{title: 'Josh House', location:{lat: 45.379291, lng: -66.2199817}},
{title: 'Luke House', location:{lat: 45.2420391, lng: -66.1485755}},
{title: 'Jack House', location:{lat: 45.3262894, lng: -66.189719}}
];
var largeInfoWindow = new google.maps.InfoWindow();
//uses location array to create an array of markers on init
for (var i = 0; i < locations.length ;i++) {
//get the position from locations array
var position = locations[i].location;
var title = locations[i].title;
//Create marker per location and put into markers array
var marker = new google.maps.Marker({
map: map,
position: position,
title: title,
animation: google.maps.Animation.DROP,
id: i
});
//Push marker into array of markers
markers.push(marker);
//Create an onclick event to open an InfoWindow for each marker
marker.addListener('click', function(){
populateInfoWindow(this, largeInfoWindow);
});
}
document.getElementById('show-listings').addEventListener('click', showListings);
document.getElementById('hide-listings').addEventListener('click', hideListings);
//This function populates the InfoWindow when the marker is clicked
//only allow one InfoWindow which will open at the marker that is clicked
//and populate based on the markers position.
function populateInfoWindow(marker, infowindow){
//check to make sure the infowindow is not already opened on this marker
if(infowindow.marker != marker){
infowindow.marker = marker;
infowindow.setContent('<div>' + marker.title + '</div>');
infowindow.open(map, marker);
//make sure the marker property is cleared if the InfoWindow is closed
infowindow.addListener('closeclick', function(){
infowindow.setMarker(null);
});
}
}
//This function will loop through the markers array and display them all
function showListings(){
for(var i = 0; i < markers.length; i++){
markers[i].setMap(map);
}
}
//This function will loop through listings and hide them all
function hideListings(){
for(var i = 0; i < markers.length; i++){
markers[i].setMap(null);
}
}
//Check if user supports geo-location
if(navigator.geolocation){
navigator.geolocation.getCurrentPosition(function(position){
var latitude = position.coords.latitude;
var longitude = position.coords.longitude;
var geolocalpoint = new google.maps.LatLng(latitude, longitude);
map.setCenter(geolocalpoint);
var mapOptions = {
zoom: 8,
center: geolocalpoint,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
//Place a marker
var geolocation = new google.maps.Marker({
position: geolocalpoint,
map: map,
title: 'Your geolocation',
icon: 'http://labs.google.com/ridefinder/images/mm_20_green.png'
});
});
}
}