Simple Map
HTML
<div id="map"></div>
<!-- Replace the value of the key parameter with your own API key. -->
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap" async defer></script>
CSS
/* Always set the map height explicitly to define the size of the div
* element that contains the map. */
#map {
height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html, body {
height: 100%;
margin: 0;
padding: 0;
}
JavaScript
var map;
const center = {lat: 41.536558, lng: -8.627487};
const radius = 25;
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
center,
zoom: 8
});
var antennasCircle = new google.maps.Circle({
strokeColor: "#FF0000",
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: "#FF0000",
fillOpacity: 0.35,
map: map,
center,
radius
});
map.fitBounds(antennasCircle.getBounds());
map.addListener('click', function(e) {
isInCircle(e.latLng, false);
});
antennasCircle.addListener('click', function(e) {
isInCircle(e.latLng, true);
});
}
function degreesToRadians(degrees) {
return degrees * Math.PI / 180;
}
function distanceInMBetweenEarthCoordinates(lat1, lon1, lat2, lon2) {
var earthRadiusM = 6371000;
var dLat = degreesToRadians(lat2-lat1);
var dLon = degreesToRadians(lon2-lon1);
lat1 = degreesToRadians(lat1);
lat2 = degreesToRadians(lat2);
var a = Math.sin(dLat/2) * Math.sin(dLat/2) +
Math.sin(dLon/2) * Math.sin(dLon/2) * Math.cos(lat1) * Math.cos(lat2);
var c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1-a));
return earthRadiusM * c;
}
function isInCircle(latLng, isInside) {
const distance = distanceInMBetweenEarthCoordinates(latLng.lat(), latLng.lng(), center.lat, center.lng);
const calculationResult = distance <= radius;
console.log(calculationResult, isInside)
alert("Calculation result is inside: " + calculationResult + " circle was clicked: " + isInside);
}