How to get lat long on draggable polygons?

Question

I want to get Lat and Long when I drag or edit polygon. How i can apply event listeners to this polygone so that whenever i edit or drag polygone it should show lat long on console of every point which i edit on polygon.

function initialize() {
    var map = new google.maps.Map(document.getElementById("map"), {
        zoom: 15,
        center: {lat: 51.476706, lng: 0},
        mapTypeId: google.maps.MapTypeId.ROADMAP
    });

    // create an array of coordinates for a pentagonal polygon
    var arrCoords = [
        new google.maps.LatLng(51.474821, -0.001935),
        new google.maps.LatLng(51.474647, 0.003966),
        new google.maps.LatLng(51.477708, 0.004073),
        new google.maps.LatLng(51.479753, 0.000468),
        new google.maps.LatLng(51.477654, -0.002192)
    ];

    var polygon = new google.maps.Polygon({
        editable: true,
        paths: arrCoords,
        strokeColor: "#FF0000",
        strokeOpacity: 0.8,
        strokeWeight: 2,
        fillColor: "#FF0000",
        fillOpacity: 0.35,
        map: map
    });
}

google.maps.event.addDomListener(window, 'load', initialize);

Shiv Kumar Baghel · Accepted Answer · 2018-12-05T10:26:58.887

-1

first make geodesic: true with draggable: true in polygon

When enabling dragging on a polygon or polyline, you should also consider making the polygon or polyline geodesic, by setting its geodesic property to true

Ref: https://developers.google.com/maps/documentation/javascript/shapes

insert_at & set_at gonna be called when polyline get edited.

var polygon = new google.maps.Polygon({
    editable: true,
    paths: arrCoords,
    strokeColor: "#FF0000",
    strokeOpacity: 0.8,
    strokeWeight: 2,
    fillColor: "#FF0000",
    fillOpacity: 0.35,
    map: map,
    draggable: true,
    geodesic: true        
});

google.maps.event.addListener(polygon, 'dragend', function(evt){        
    console.log(evt.latLng.lat() ,'--',  evt.latLng.lng() );
});

google.maps.event.addListener(polygon.getPath(), 'insert_at', function(index, obj) {
     console.log('Vertex removed from inner path.');
     console.log(obj.lat() ,'--',  obj.lng() );
});

google.maps.event.addListener(polygon.getPath(), 'set_at', function(index, obj) {
     console.log('Vertex moved on outer path.');
     console.log(obj.lat() ,'--',  obj.lng() );
});

edited Dec 05 '18 at 10:26

answered Dec 05 '18 at 09:14

Shiv Kumar Baghel

2,464
6
18
34

Its only on drag not on edit .. and it's showing only 2 points latlong i have multiple points. – Dec 05 '18 at 09:18
@izza added function when you edit the polygon. check pls – Shiv Kumar Baghel Dec 05 '18 at 09:34
its working but how can i get the positions like north east west south? – Dec 05 '18 at 10:04
1) OP didn't ask for a draggable Polygon 2) What has `geodesic` to do with editing a Polygon? What does it do? 3) *use below code when marker get edited* what marker are you talking about? – MrUpsidown Dec 05 '18 at 10:19
1) asked for drag/edit ploygon. 2) added `geodesic` reference. if not enabled then will not able to drag the polylines. 3) talking about function gonna called if polylines drag/drop. Thanks @MrUpsidown edited my answer. – Shiv Kumar Baghel Dec 05 '18 at 10:29
1) Right. I missed that. 2) No. `geodesic` has nothing to do with being able to drag Polylines or Polygon vertices. *`geodesic`: When true, edges of the polygon are interpreted as geodesic and will follow the curvature of the Earth. When false, edges of the polygon are rendered as straight lines in screen space. Note that the shape of a geodesic polygon may appear to change when dragged, as the dimensions are maintained relative to the surface of the earth. Defaults to false.* – MrUpsidown Dec 05 '18 at 10:50
As a general rule: please avoid answering questions that have already been answered multiple times (duplicates) which is the case here. – MrUpsidown Dec 05 '18 at 10:53
1

@MrUpsidown thanks, before answer haven't check on community for duplicity :) – Shiv Kumar Baghel Dec 05 '18 at 13:22

How to get lat long on draggable polygons?

1 Answers1