Google Map - Search Nearest
by Ben Clayton
HTML
<script src="https://maps.googleapis.com/maps/api/js"></script>
Enter your address:
<input id='addressInput' value='tn342uf'/>
<button onclick='searchLocations()' id='search'>Search</button>
<div id='status'></div>
<br/>
<div id='results'></div>
CSS
#results {margin-top:30px}
#status {color:red}
.miles {min-width:100px;display:inline-block;}
JavaScript
/* find within 25 miles radius from 37, -122
SELECT id, ( 3959 * acos( cos( radians(37) ) * cos( radians( lat ) ) * cos( radians( lng ) - radians(-122) ) + sin( radians(37) ) * sin( radians( lat ) ) ) ) AS distance FROM markers HAVING distance < 25 ORDER BY distance LIMIT 0 , 20;
*/
var markers = [
{lat:50.8579089828489, lng:0.573906898498535, title:'Source'},
{lat:51.1565589391499, lng:5.39334565401077, title:'The 900 Shop, Belguim'}
];
Math.radians = function(degrees) {
return degrees * Math.PI / 180;
};
function searchLocationsNear(location){
console.log(location);
var slat = location.lat();
var slng = location.lng();
debugger;
var s='';
for(var x=0;x<this.markers.length;x++){
var marker = this.markers[x];
//console.log(marker);
var d = ( 3959 * Math.acos( Math.cos( Math.radians(slng) ) * Math.cos( Math.radians( marker.lng ) ) * Math.cos( Math.radians( marker.lat ) - Math.radians(slat) ) + Math.sin( Math.radians(slng) ) * Math.sin( Math.radians( marker.lng ) ) ) )
s += '<div class="miles">' + d.toFixed(1) + ' miles</div> ' + marker.title + '<br/>';
}
document.getElementById("results").innerHTML=s;
}
function searchLocations() {
var address = document.getElementById("addressInput").value;
var geocoder = new google.maps.Geocoder();
geocoder.geocode({address: address}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
document.getElementById("status").innerHTML='';
searchLocationsNear(results[0].geometry.location);
} else {
document.getElementById("status").innerHTML='Address "'+address + '" not found';
document.getElementById("results").innerHTML='';
}
});
}