Reputation: 63
I'm writing an site that shows the our stores near an address. I have the list of latitude and longitude locations of each store from a service.I found my position and marked the stores.But i cant found closest store to my location.Can u help me? :)
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
center: new google.maps.LatLng(40.188528, 29.060964),
zoom: 10
});
var infoWindow = new google.maps.InfoWindow;
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position) {
var pos = {
lat: position.coords.latitude,
lng: position.coords.longitude
};
infoWindow.setPosition(pos);
infoWindow.setContent('Location found.');
infoWindow.open(map);
}, function() {
handleLocationError(true, infoWindow, map.getCenter());
});
} else {
// Browser doesn't support Geolocation
handleLocationError(false, infoWindow, map.getCenter());
}
downloadUrl('locations.xml', function(data) {
var xml = data.responseXML;
var markers = xml.documentElement.getElementsByTagName('marker');
Array.prototype.forEach.call(markers, function(markerElem) {
var id = markerElem.getAttribute('id');
var name = markerElem.getAttribute('name');
var address = markerElem.getAttribute('address');
var type = markerElem.getAttribute('type');
var point = new google.maps.LatLng(
parseFloat(markerElem.getAttribute('lat')),
parseFloat(markerElem.getAttribute('lng')));
var infowincontent = document.createElement('div');
var strong = document.createElement('strong');
strong.textContent = name
infowincontent.appendChild(strong);
infowincontent.appendChild(document.createElement('br'));
var text = document.createElement('text');
text.textContent = address
infowincontent.appendChild(text);
var icon = customLabel[type] || {};
var marker = new google.maps.Marker({
map: map,
position: point,
label: icon.label
});
marker.addListener('click', function() {
infoWindow.setContent(infowincontent);
infoWindow.open(map, marker);
});
});
});
}
<markers>
<marker id="1" name="Pronet" address="Altınşehir Mahallesi, Muammer Aksoy Cd. No:45, 16120 Nilüfer/Bursa" lat="40.227127" lng="28.924318" type="Ajans"/>
<marker id="2" name="Nette" address="Fethiye Mahallesi, Bursa Cd No:1, 16140 Başiskele/Bursa" lat="40.227173" lng="28.979762" type="Ajans"/>
<marker id="3" name="Alivre" address="Osmangazi Mahallesi, Altıparmak Caddesi, No:86 Stad İş Merkezi K:6 D:15, 16050 Osmangazi/Bursa" lat="40.190341" lng="29.050251" type="Ajans"/>
Upvotes: 1
Views: 3669
Reputation: 1849
You can use this function in order to find the closest marker around your position:
function rad(x) { return x * Math.PI / 180; }
function find_closest_marker(position) {
var lat = position.lat;
var lng = position.lng;
var R = 6371; // radius of earth in km
var distances = [];
var closest = -1;
for (i = 0; i < gmarkers.length; i++) {
if (gmarkers[i]) {
var mlat = gmarkers[i].position.lat();
var mlng = gmarkers[i].position.lng();
var dLat = rad(mlat - lat);
var dLong = rad(mlng - lng);
var a = Math.sin(dLat / 2) * Math.sin(dLat / 2) +
Math.cos(rad(lat)) * Math.cos(rad(lat)) * Math.sin(dLong / 2) * Math.sin(dLong / 2);
var c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
var d = R * c;
distances[i] = d;
if (closest == -1 || d < distances[closest]) {
closest = i;
}
}
}
return (closest);
}
However, when you initialize your markers you may put them in an array markers like this:
markers.push (newMarker);
You may use the function like this:
var closestMarker = find_closest_marker (yourPosition);
closestMarker=markers[closestMarker];
The function find_closest_marker return the case of the nearest in the array markers
.
Tell me if you have some questions.
Upvotes: 3