Dear communities have a greeting from me, I want to make a query, and that is that I am developing a map of coverage areas and I have been able to draw many areas on the map, in the code that I am going to share with you below I have only left 3 for Example and demonstration uses, now, what my code should do is that every time the google maps marker leaves the red polygon its value becomes false.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Electronica 2001</title>
<meta name="description" content="Electronica 2001">
<meta name="author" content="Electronica 2001">
<!-- Favicon -->
<link rel="shortcut icon" href="https://electronica2001es.com/images/favicon2.ico">
<script type="text/javascript">
WebFontConfig = {
google: { families: [ 'Open+Sans:300,400,600,700,800','Poppins:300,400,500,600,700' ] }
};
(function(d) {
var wf = d.createElement('script'), s = d.scripts[0];
wf.src = 'assets/js/webfont.js';
wf.async = true;
s.parentNode.insertBefore(wf, s);
})(document);
</script>
<script type="text/javascript"></script>
<!-- Plugins CSS File -->
<link rel="stylesheet" href="assets/css/bootstrap.min.css">
<!-- Main CSS File -->
<link rel="stylesheet" href="assets/css/style.min.css">
<link rel="stylesheet" type="text/css" href="assets/vendor/fontawesome-free/css/all.min.css">
<style>
body {
margin: 0;
padding: 0
}
html,
body,
#map {
height: 100%;
font-family: Arial, sans-serif;
font-size: .9em;
color: #fff;
}
#note {
text-align: center;
padding: .3em; 10px;
background: #009ee0;
}
.bool {
font-style: italic;
color: #313131;
}
.info {
display: inline-block;
width: 40%;
text-align: center;
}
.infowin {
color: #313131;
}
#title,
.bool{
font-weight: bold;
}
</style>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCA3CvqkU5D5dLfADaABJi3OxjoWL64keA&callback=initMap&libraries=places,geometry,drawing&v=weekly" defer></script>
</head>
<body onload="init()">
<div id="note">
<span id="title">»Inside the circle?«</span>
<hr />
<span class="info">Marker <strong>A</strong>: <span id="a" class="bool"></span></span> ←♦→ <span class="info">Marker <strong>B</strong>: <span id="b" class="bool"></span></span>
</div>
<div id="map">test</div>
<p id="demo"></p>
<script src="assets/js/jquery.min.js"></script>
<script src="assets/js/bootstrap.bundle.min.js"></script>
<script src="assets/js/plugins.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@10"></script>
<script>
function sueltala() {
Swal.fire({
icon: 'success',
title: '¡Información importante!',
text: 'Something went wrong!',
footer: '<a href>Why do I have this issue?</a>'
})
}
</script>
<!-- Main JS File -->
<script src="assets/js/main.min.js"></script>
<script>
var x = document.getElementById("demo");
window.onload = function init() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(showPosition);
} else {
x.innerHTML = "Geolocation is not supported by this browser.";
}
function showPosition(position) {
x.innerHTML = position.coords.latitude + "," + position.coords.longitude;
var
contentCenter = '<span class="infowin">Center Marker (draggable)</span>',
contentA = '<span class="infowin">Marker A (draggable)</span>',
contentB = '<span class="infowin">Marker B (draggable)</span>';
var
latLngCenter = new google.maps.LatLng(position.coords.latitude, position.coords.longitude),
latLngCMarker = new google.maps.LatLng(position.coords.latitude, position.coords.longitude),
latLngA = new google.maps.LatLng(position.coords.latitude, position.coords.longitude),
latLngB = new google.maps.LatLng(38, -93),
coords = [ [ [-89.19868711734125, 13.69215075483513], [-89.19807557368586, 13.691410653984653], [-89.19831965470621, 13.690871212812844], [-89.19834915900537, 13.69033177040379], [-89.19825796389887, 13.690128501928752], [-89.19697050357172, 13.690097229840053], [-89.19645551944086, 13.69013371394311], [-89.19598345065424, 13.690670550805194], [-89.19385914111444, 13.691295990264242], [-89.19233564639399, 13.691963123853995], [-89.19868711734125, 13.69215075483513], [-89.19868711734125, 13.69215075483513], [-89.19868711734125, 13.69215075483513]], [ [-89.19570795712826, 13.673281378361137], [-89.19570795712826, 13.673281378361137], [-89.19570795712826, 13.673281378361137], [-89.19654480634091, 13.673281378361137], [-89.19667355237362, 13.671175564389776], [-89.19562212643979, 13.6697786279033], [-89.1954075497186, 13.670612620832053], [-89.19602982221005, 13.67232229710495], [-89.19570795712826, 13.673281378361137]], [ [-89.18643520663386, 13.704821815720464], [-89.18654249499446, 13.703946250391347], [-89.1831092674554, 13.703550160242049], [-89.18302343676692, 13.70413387180797], [-89.18403194735652, 13.70430064627475], [-89.18403194735652, 13.704592501306768], [-89.1865854103387, 13.704842662474233], [-89.18643520663386, 13.704821815720464], [-89.18643520663386, 13.704821815720464]]],
map = new google.maps.Map(document.getElementById('map'), {
zoom: 7,
center: latLngCenter,
mapTypeId: google.maps.MapTypeId.ROADMAP,
mapTypeControl: false
}),
markerCenter = new google.maps.Marker({
position: latLngCMarker,
title: 'Center of Circle',
map: map,
draggable: true
}),
infoCenter = new google.maps.InfoWindow({
content: contentCenter
}),
markerA = new google.maps.Marker({
position: latLngA,
title: 'A',
map: map,
label: 'A',
draggable: true
}),
infoA = new google.maps.InfoWindow({
content: contentA
}),
markerB = new google.maps.Marker({
position: latLngB,
title: 'B',
map: map,
label: 'B',
draggable: true
}),
infoB = new google.maps.InfoWindow({
content: contentB
})
// exemplary setup:
// Assumes that your map is signed to the var "map"
// Also assumes that your marker is named "marker"
,
/* circle = new google.maps.Circle({
map: map,
clickable: false,
// metres
radius: 100000,
fillColor: '#fff',
fillOpacity: .6,
strokeColor: '#313131',
strokeOpacity: .4,
strokeWeight: .8
}); */
bounds = new google.maps.LatLngBounds();
for (var i = 0; i < coords.length; i++) {
var polygonCoords = [];
for (var j = 0; j < coords[i].length; j++) {
var pt = new google.maps.LatLng(coords[i][j][1], coords[i][j][0])
bounds.extend(pt);
polygonCoords.push(pt);
}
// Construct the polygon.
circle = new google.maps.Polygon({
paths: polygonCoords,
strokeColor: '#FF0000',
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: '#FF0000',
fillOpacity: 0.35,
map: map
});
};
// attach circle to marker
circle.bindTo('center', markerCenter, 'position');
google.maps.Polygon.prototype.getBounds = function() {
var bounds = new google.maps.LatLngBounds();
this.getPaths().forEach(function(path) {
path.forEach(function(point) {
bounds.extend(point);
});
});
return bounds;
};
var
// get the Bounds of the circle
bounds = circle.getBounds()
// Note spans
,
noteA = jQuery('.bool#a'),
noteB = jQuery('.bool#b');
noteA.text((100000 > google.maps.geometry.spherical.computeDistanceBetween(markerA.getPosition(),markerCenter.getPosition())));
noteB.text((100000 > google.maps.geometry.spherical.computeDistanceBetween(markerB.getPosition(),markerCenter.getPosition())));
// get some latLng object and Question if it's contained in the circle:
google.maps.event.addListener(markerCenter, 'dragend', function() {
latLngCenter = markerCenter.position;
noteA.text((100000 > google.maps.geometry.spherical.computeDistanceBetween(markerA.getPosition(),markerCenter.getPosition())));
noteB.text((100000 > google.maps.geometry.spherical.computeDistanceBetween(markerB.getPosition(),markerCenter.getPosition())));
});
google.maps.event.addListener(markerA, 'dragend', function() {
latLngA = markerA.position;
noteA.text((100000 > google.maps.geometry.spherical.computeDistanceBetween(markerA.getPosition(),markerCenter.getPosition())));
});
google.maps.event.addListener(markerB, 'dragend', function() {
latLngB = markerB.position;
noteB.text((100000 > google.maps.geometry.spherical.computeDistanceBetween(markerB.getPosition(),markerCenter.getPosition())));
});
google.maps.event.addListener(markerCenter, 'click', function() {
infoCenter.open(map, markerCenter);
});
google.maps.event.addListener(markerA, 'click', function() {
infoA.open(map, markerA);
});
google.maps.event.addListener(markerB, 'click', function() {
infoB.open(map, markerB);
});
google.maps.event.addListener(markerCenter, 'drag', function() {
infoCenter.close();
noteA.html("draggin…");
noteB.html("draggin…");
});
google.maps.event.addListener(markerA, 'drag', function() {
infoA.close();
noteA.html("draggin…");
});
google.maps.event.addListener(markerB, 'drag', function() {
infoB.close();
noteB.html("draggin…");
});
}
};
</script>
</body>
</html>