I am working on google map polygon marker, I have predefined lat long array, and need to set polygon area, It is working fine for me, but when i drag the marker polygon line doesn't change, it should have to be change as i drag the marker, can anyone please help me how can i resolve this issue ? Here i have added my code, can anyone please help me ?
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>Polygon Arrays</title>
<style>
/* 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;
}
</style>
</head>
<body>
<div id="map"></div>
<input type="text" name="estimated_area" id="estimated_area" value="">
<input type="text" name="field_fj0d6" id="field_fj0d6" value="">
<script>
// This example creates a simple polygon representing the Bermuda Triangle.
// When the user clicks on the polygon an info window opens, showing
// information about the polygon's coordinates.
var map;
var infoWindow;
var markers = []; // Store Marker in an Array
function initMap() {
var lM = 't';
map = new google.maps.Map(document.getElementById('map'), {
zoom: 5,
center: {lat: 24.886, lng: -70.268},
mapTypeId: 'terrain'
});
// Define the LatLng coordinates for the polygon.
var triangleCoords = [
{lat: 25.774, lng: -80.190},
{lat: 18.466, lng: -66.118},
{lat: 32.321, lng: -64.757}
];
// Add Markers to Coordinates
for (var i = 0; i < triangleCoords.length; i++) {
var pos = triangleCoords[i];
var marker = new google.maps.Marker({
map: map,
position: pos,
draggable: true,
});
marker.setMap(map);
markers.push(marker);
var measure = {
mvcLine: new google.maps.MVCArray(),
mvcPolygon: new google.maps.MVCArray(),
mvcMarkers: new google.maps.MVCArray(),
line: null,
polygon: null
};
var latLng = pos;
var dot = marker;
/************** New Code ****************/
measure.mvcLine.push(latLng);
measure.mvcPolygon.push(latLng);
measure.mvcMarkers.push(dot);
var latLngIndex = measure.mvcLine.getLength() - 1;
google.maps.event.addListener(dot, "drag", function (evt) {
measure.mvcLine.setAt(latLngIndex, evt.latLng);
measure.mvcPolygon.setAt(latLngIndex, evt.latLng);
});
google.maps.event.addListener(dot, "dragend", function () {
console.log('<p>Marker dropped: Current Lat: ' + this.getPosition().lat() + ' Current Lng: ' + this.getPosition().lng() + '</p>');
drag = true;
setTimeout(function () {
drag = false;
}, 250);
if (measure.mvcLine.getLength() > 1) {
mC();
}
});
if (measure.mvcLine.getLength() > 1) {
if (!measure.line) {
measure.line = new google.maps.Polyline({
map: map,
clickable: false,
strokeColor: "#ff5b06",
strokeOpacity: 1,
strokeWeight: 3,
path: measure.mvcLine
});
}
if (measure.mvcPolygon.getLength() > 2) {
if (!measure.polygon) {
if (lM) {
measure.polygon = new google.maps.Polygon({
clickable: false,
map: map,
fillOpacity: 0.6,
fillColor: '#000000',
strokeOpacity: 0,
paths: measure.mvcPolygon
});
} else {
measure.polygon = new google.maps.Polygon({
clickable: false,
map: map,
fillOpacity: 0.6,
fillColor: '#000000',
strokeOpacity: 0,
paths: measure.mvcPolygon
});
}
}
}
}
if (measure.mvcLine.getLength() > 1) {
mC();
}
}
// Construct the polygon.
var bermudaTriangle = new google.maps.Polygon({
paths: triangleCoords,
strokeColor: '#ff5b06',
strokeOpacity: 1,
strokeWeight: 3,
fillColor: '#000000',
fillOpacity: 0.6
});
bermudaTriangle.setMap(map);
}
function mR() {
if (measure.polygon) {
measure.polygon.setMap(null);
measure.polygon = null;
}
if (measure.line) {
measure.line.setMap(null);
measure.line = null
}
measure.mvcLine.clear();
measure.mvcPolygon.clear();
measure.mvcMarkers.forEach(function (elem, index) {
elem.setMap(null);
});
measure.mvcMarkers.clear();
document.getElementById('estimated_area').value = '';
document.getElementById('field_fj0d6').value = '';
}
function mC() {
var l = 0;
if (measure.mvcPolygon.getLength() > 1) {
l = google.maps.geometry.spherical.computeLength(measure.line.getPath());
}
var a = 0;
if (measure.mvcPolygon.getLength() > 2) {
a = google.maps.geometry.spherical.computeArea(measure.polygon.getPath());
}
if (a) {
var km = a / (1000 * 1000);
var feet = a * 10.7639104;
var yards = a * 1.19599005;
var acres = a * 0.000247105381;
var unit = " meters²";
var unit1 = " acres";
var unit2 = " km²";
var unit3 = " sq. ft.";
var unit4 = " yards²";
var area = feet.toFixed(0) + unit3;
//This is for update details in review tab
document.getElementById('estimated_area').value = parseFloat(area);
document.getElementById('field_fj0d6').value = String(area);
}
}
function rL() {
var test = measure.mvcLine.pop();
if (test) {
measure.mvcPolygon.pop();
var dot = measure.mvcMarkers.pop();
dot.setMap(null);
mC();
}
}
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDYeDBDl-8Wx98Az55EbVnpvRfSIBbwxyE&callback=initMap">
</script>
</body>
</html>
You need to bind the vertices of the polygon to the markers.
var bermudaTriangle = new google.maps.Polygon({
paths: triangleCoords,
strokeColor: '#ff5b06',
strokeOpacity: 1,
strokeWeight: 3,
fillColor: '#000000',
fillOpacity: 0.6
});
bermudaTriangle.setMap(map);
bermudaTriangle.binder = new MVCArrayBinder(bermudaTriangle.getPath());
for (var j = 0; j < bermudaTriangle.getPath().getLength(); j++) {
var mark = new google.maps.Marker({
position: bermudaTriangle.getPath().getAt(),
map: map,
draggable: true
});
mark.bindTo('position', bermudaTriangle.binder, (j).toString());
}
code snippet:
var map;
var markers = []; // Store Marker in an Array
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
zoom: 5,
center: {
lat: 24.886,
lng: -70.268
},
mapTypeId: 'terrain'
});
// Define the LatLng coordinates for the polygon.
var triangleCoords = [{
lat: 25.774,
lng: -80.190
},
{
lat: 18.466,
lng: -66.118
},
{
lat: 32.321,
lng: -64.757
}
];
// Add Markers to Coordinates
// Construct the polygon.
var bermudaTriangle = new google.maps.Polygon({
paths: triangleCoords,
strokeColor: '#ff5b06',
strokeOpacity: 1,
strokeWeight: 3,
fillColor: '#000000',
fillOpacity: 0.6
});
bermudaTriangle.setMap(map);
bermudaTriangle.binder = new MVCArrayBinder(bermudaTriangle.getPath());
for (var j = 0; j < bermudaTriangle.getPath().getLength(); j++) {
var mark = new google.maps.Marker({
position: bermudaTriangle.getPath().getAt(),
map: map,
draggable: true
});
mark.bindTo('position', bermudaTriangle.binder, (j).toString());
}
}
google.maps.event.addDomListener(window, 'load', initMap);
/*
* Use bindTo to allow dynamic drag of markers to refresh poly.
*/
function MVCArrayBinder(mvcArray) {
this.array_ = mvcArray;
}
MVCArrayBinder.prototype = new google.maps.MVCObject();
MVCArrayBinder.prototype.get = function(key) {
if (!isNaN(parseInt(key))) {
return this.array_.getAt(parseInt(key));
} else {
this.array_.get(key);
}
}
MVCArrayBinder.prototype.set = function(key, val) {
if (!isNaN(parseInt(key))) {
this.array_.setAt(parseInt(key), val);
} else {
this.array_.set(key, val);
}
}html,
body,
#map {
height: 100%;
margin: 0;
padding: 0;
}<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map"></div>