JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://maps.google.com/maps/api/js?sensor=false&.js"></script>
<div id="map"></div>
CSS
#map {
width:500px;
height:500px;
}
JavaScript
function pointInPolygon(state, lat, lng) {
var polyCount = state.length;
var oddNodes = false;
var j = 0;
for (var i = 0; i < polyCount; i++) {
j++;
if (j == polyCount) {
j = 0;
}
latitudeBoundry = state[i].lat();
longitudeBoundry = state[i].lng();
latitudeBoundry2 = state[j].lat();
longitudeBoundry2 = state[j].lng();
if ((latitudeBoundry > lat && latitudeBoundry <= lat || latitudeBoundry2 > lat && latitudeBoundry <= lat)) {
if (longitudeBoundry + (lat - latitudeBoundry) / (latitudeBoundry2 - latitudeBoundry) * (longitudeBoundry2 - longitudeBoundry) > lng) {
oddNodes = !oddNodes
}
}
}
return oddNodes;
}
function initialize() {
var center_latlng = new google.maps.LatLng(42.354183, -71.065063);
var options = {
zoom: 15,
minZoom: 2,
maxZoom: 19,
center: center_latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map"), options);
var COLORADO = [
new google.maps.LatLng(37.0004, -109.0448),
new google.maps.LatLng(40.9996, -109.0489),
new google.maps.LatLng(41.0006, -102.0534),
new google.maps.LatLng(36.9949, -102.0424),
new google.maps.LatLng(37.0004, -109.0448)
];
var counter = 0;
//this point is in CO
if (pointInPolygon(COLORADO, 39.274222, -106.129329)) {
counter++;
}
//this point is not in CO
if (pointInPolygon(COLORADO, 39.376205, -109.557064)) {
counter++;
}
//this point is not in CO
if (pointInPolygon(COLORADO, 37.952283, -100.031918)) {
counter++;
}
console.log("counter should be 1 -> counter == " + counter);
//create a bounds for the zoom level.
var bounds = new google.maps.LatLngBounds();
for (var i = 0; i < COLORADO.length; i++) {
...