JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
<span id="spanId">Loading...</span>
JavaScript
Number.prototype.toRad = function () {
return this * Math.PI / 180;
}
Number.prototype.toDeg = function () {
return this * 180 / Math.PI;
}
google.maps.LatLng.prototype.destinationPoint = function (brng, dist) {
dist = dist / 6371;
brng = brng.toRad();
var lat1 = this.lat().toRad(), lon1 = this.lng().toRad();
var lat2 = Math.asin(Math.sin(lat1) * Math.cos(dist) +
Math.cos(lat1) * Math.sin(dist) * Math.cos(brng));
var lon2 = lon1 + Math.atan2(Math.sin(brng) * Math.sin(dist) *
Math.cos(lat1),
Math.cos(dist) - Math.sin(lat1) *
Math.sin(lat2));
if (isNaN(lat2) || isNaN(lon2)) return null;
return new google.maps.LatLng(lat2.toDeg(), lon2.toDeg());
}
var pointA = new google.maps.LatLng(32.6811,74.8732);
getLocation(pointA);
var distance = 0;
function getLocation(info) {
var myCenter = info;
var gc = new google.maps.Geocoder();
gc.geocode({ 'location': myCenter }, function (results, status) {
if (status == google.maps.GeocoderStatus.OK) {
if (results[1]) {
document.getElementById('spanId').innerHTML = '" ' + results[1].formatted_address + '" is the found location, this is <b>' + distance + ' kms </b> away from original point' ;
} else {
window.alert('No results found');
}
} else {
if (status == 'ZERO_RESULTS' )
{
var radiusInKm = 10;
distance += radiusInKm;
document.getElementById('spanId').innerHTML = 'Location name not found for the given coordinates....