calculate area of a drawn polygon on google map javascript

Question

Hi there I have to calculate the area of drawn polygon on google map . jsfiddle http://jsfiddle.net/tvqzd/4/

I calculate it using

var area = google.maps.geometry.spherical.computeArea(newShape.getPath()); 

but I want it to be Calculated on button click

and polygon is editable . What if I change/edit area ? Can I get the area on areachange event or something?

Answer 1

You need to listen for the set_at and insert_at events on the polygon path, recalculate the area when one of them fires.

Description of user editable shape events in the documentation

Example: http://jsfiddle.net/geocodezip/hk82v0zp/2/

code snippet:

 var drawingManager; var selectedShape; var colors = ['#1E90FF', '#FF1493', '#32CD32', '#FF8C00', '#4B0082']; var selectedColor; var colorButtons = {}; function clearSelection() { if (selectedShape) { selectedShape.setEditable(false); selectedShape = null; } } function setSelection(shape) { clearSelection(); selectedShape = shape; shape.setEditable(true); selectColor(shape.get('fillColor') || shape.get('strokeColor')); google.maps.event.addListener(shape.getPath(), 'set_at', calcar); google.maps.event.addListener(shape.getPath(), 'insert_at', calcar); } function calcar() { var area = google.maps.geometry.spherical.computeArea(selectedShape.getPath()); document.getElementById("area").innerHTML = "Area =" + area.toFixed(2); } function deleteSelectedShape() { if (selectedShape) { selectedShape.setMap(null); } } function selectColor(color) { selectedColor = color; for (var i = 0; i < colors.length; ++i) { var currColor = colors[i]; colorButtons[currColor].style.border = currColor == color ? '2px solid #789' : '2px solid #fff'; } // Retrieves the current options from the drawing manager and replaces the // stroke or fill color as appropriate. var polylineOptions = drawingManager.get('polylineOptions'); polylineOptions.strokeColor = color; drawingManager.set('polylineOptions', polylineOptions); var rectangleOptions = drawingManager.get('rectangleOptions'); rectangleOptions.fillColor = color; drawingManager.set('rectangleOptions', rectangleOptions); var circleOptions = drawingManager.get('circleOptions'); circleOptions.fillColor = color; drawingManager.set('circleOptions', circleOptions); var polygonOptions = drawingManager.get('polygonOptions'); polygonOptions.fillColor = color; drawingManager.set('polygonOptions', polygonOptions); } function setSelectedShapeColor(color) { if (selectedShape) { if (selectedShape.type == google.maps.drawing.OverlayType.POLYLINE) { selectedShape.set('strokeColor', color); } else { selectedShape.set('fillColor', color); } } } function makeColorButton(color) { var button = document.createElement('span'); button.className = 'color-button'; button.style.backgroundColor = color; google.maps.event.addDomListener(button, 'click', function() { selectColor(color); setSelectedShapeColor(color); }); return button; } function buildColorPalette() { var colorPalette = document.getElementById('color-palette'); for (var i = 0; i < colors.length; ++i) { var currColor = colors[i]; var colorButton = makeColorButton(currColor); colorPalette.appendChild(colorButton); colorButtons[currColor] = colorButton; } selectColor(colors[0]); } function initialize() { var map = new google.maps.Map(document.getElementById('map'), { zoom: 10, center: new google.maps.LatLng(22.344, 114.048), mapTypeId: google.maps.MapTypeId.ROADMAP, disableDefaultUI: true, zoomControl: true }); var polyOptions = { strokeWeight: 0, fillOpacity: 0.45, editable: true }; // Creates a drawing manager attached to the map that allows the user to draw // markers, lines, and shapes. drawingManager = new google.maps.drawing.DrawingManager({ drawingMode: google.maps.drawing.OverlayType.POLYGON, markerOptions: { draggable: true }, polylineOptions: { editable: true }, rectangleOptions: polyOptions, circleOptions: polyOptions, polygonOptions: polyOptions, map: map }); google.maps.event.addListener(drawingManager, 'overlaycomplete', function(e) { if (e.type != google.maps.drawing.OverlayType.MARKER) { // Switch back to non-drawing mode after drawing a shape. drawingManager.setDrawingMode(null); // Add an event listener that selects the newly-drawn shape when the user // mouses down on it. var newShape = e.overlay; newShape.type = e.type; google.maps.event.addListener(newShape, 'click', function() { setSelection(newShape); }); var area = google.maps.geometry.spherical.computeArea(newShape.getPath()); document.getElementById("area").innerHTML = "Area =" + area.toFixed(2); setSelection(newShape); } }); // Clear the current selection when the drawing mode is changed, or when the // map is clicked. google.maps.event.addListener(drawingManager, 'drawingmode_changed', clearSelection); google.maps.event.addListener(map, 'click', clearSelection); google.maps.event.addDomListener(document.getElementById('delete-button'), 'click', deleteSelectedShape); buildColorPalette(); } google.maps.event.addDomListener(window, 'load', initialize);

 #map, html, body { padding: 0; margin: 0; height: 100%; } #panel { width: 200px; font-family: Arial, sans-serif; font-size: 13px; float: right; margin: 10px; } #color-palette { clear: both; } .color-button { width: 14px; height: 14px; font-size: 0; margin: 2px; float: left; cursor: pointer; } #delete-button { margin-top: 5px; }

 <script src="https://maps.googleapis.com/maps/api/js?libraries=geometry,drawing&key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script> <title>Drawing Tools</title> <div id="panel"> <div id="color-palette"></div> <div> <button id="delete-button">Delete Selected Shape</button> <button id="calculate" onClick="calcar()">calculate area</button> <div id="area"></div> </div> </div> <div id="map"></div>