Selecting Polygon on Google Maps V3
Add a click event listener to your polygon and get its paths:
google.maps.event.addListener(bermudaTriangle, 'click', function () {
var polygonPaths = this.getPaths();
});
Check the documented Polygon methods and events.
Javid
Updated on June 04, 2022Comments
-
Javid almost 2 years
My project is to create a zone management module for a online business.
The business owner / admin can create new zones by drawing them as POLYGONS on a google map.
I am able to draw polygons, select between them fetch the coordinates and save them without any problem.
However when i try to fetch the existing coordinates stored in the database and draw them on screen, they get rendered properly, but i am not able to select them.
I have been using google's code samples to test out the functionality.
The Code i am using to draw existing coordinates is
var triangleCoords = [ new google.maps.LatLng(25.774252, -80.190262), new google.maps.LatLng(18.466465, -66.118292), new google.maps.LatLng(32.321384, -64.75737), new google.maps.LatLng(25.774252, -80.190262) ]; // Construct the polygon. bermudaTriangle = new google.maps.Polygon({ paths: triangleCoords, strokeColor: '#FF0000', strokeOpacity: 0.8, strokeWeight: 2, fillColor: '#FF0000', fillOpacity: 0.35 }); bermudaTriangle.setMap(map); } google.maps.event.addDomListener(window, 'load', initialize);
The Code i am using for Drawing Polygons on the screen using the Drawing Manager is also from a Google sample
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); }); 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);
Since the function i am using to select between the polygons checks for overlay complete using the drawing manager,
google.maps.drawing.OverlayType.POLYGON
i am not able to select polygons drawn using
google.maps.Polygon
so tldr
1 ) how do i check if i am selecting a Polygon on google maps ?
OR
2) How do i draw pre defined polygon points using the Drawing Manager?
Thanks.
-
Javid about 9 yearsI have tried in code pen, working code for my issue. codepen.io/anon/pen/qEvGYE