JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAYtvzvTrCagXcnPFVDY1Bz7HSH_7Kidv0&libraries=geometry"></script>
<div id="map"></div>
CSS
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
#map {
height: 100%;
}
JavaScript
//must load geometry library in google maps API request libraries=geometry
function initialize() {
var map = new google.maps.Map(document.getElementById('map'), {
center: {
lat: 41.345947,
lng: 2.149434
},
zoom: 15,
});
var polygonCoords = [{
lat: 41.345947,
lng: 2.149434
}, {
lat: 41.345659,
lng: 2.148954
}, {
lat: 41.343916,
lng: 2.147819
}, {
lat: 41.343691,
lng: 2.147787
}, {
lat: 41.343328,
lng: 2.148641
}, {
lat: 41.343077,
lng: 2.150446
}, {
lat: 41.346502,
lng: 2.150955
}, {
lat: 41.346446,
lng: 2.151627
}, {
lat: 41.347042,
lng: 2.151698
}, {
lat: 41.347184,
lng: 2.151047
}, {
lat: 41.346954,
lng: 2.150173
}, {
lat: 41.345865,
lng: 2.149828
}, {
lat: 41.345947,
lng: 2.149434
}];
const cityCircle = new google.maps.Circle({
strokeColor: "#FF0000",
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: "#FF0000",
fillOpacity: 0.35,
map,
center: {lat: 41.340142, lng: 2.149115},
radius: 50,
});
new google.maps.Circle({
strokeColor: "#FF0000",
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: "#FF0000",
fillOpacity: 0.35,
map,
center: {lat: 41.338361, lng: 2.144700},
radius: 50,
});
var polygonObject = new google.maps.Polygon({
paths: polygonCoords,
strokeColor: '#FF0000',
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: '#FF0000',
fillOpacity: 0.35
});
polygonObject.setMap(map);
var testPointCoords = new google.maps.LatLng(41.344638, 2.149551);
var resultColor =
google.maps.geometry.poly.containsLocation(testPointCoords, polygonObject) ?
'green' :
'red';
var testPointObject = new google.maps.Marker({
position: testPointCoords,
map: map,
icon: {
path: google.maps.SymbolPath.CIRCLE,
fillColor: resultColor,
...