How to track event changes to a polygon with Google Maps API

javascript google-maps google-maps-api-3 polygon

16,114

these events are defined for MVCArray, a polyline is not a MVCArray. You must observe the events for the path of the polyline(which is a MVCArray) instead. Furthermore you can't add a listener to an object that isn't created yet. The polygon is not available before polygoncomplete, so you must add the listeners inside the polygoncomplete-callback:

google.maps.event.addListener(drawingManager,'polygoncomplete',function(polygon) {

  // complete functions

  google.maps.event.addListener(thePath, 'set_at', function() {
    // complete functions
  });

  google.maps.event.addListener(thePath, 'insert_at', function() {
    // complete functions
  });

});

16,114

Author by

Jonny Haynes

I am a northerer, a front-end developer, a musician, a cyclist and a father of two living in a small not-so-sunny northern town near Sheffield, South Yorkshire (UK). I graduated from Wakefield College in 2006 with an HND in Interactive Media. I've got 8 years experience in Front-End Development and spent 3 years working for an NMA Top 100 Interactive Agency in Technophobia. I was lucky enough to be asked to teach Web Development to FdA students and I consulted for the University Centre Wakefield for 1 year. I'm currently employed by Ledgard Jepson, a small but highly-skilled New Media agency in Tankersly, Sheffield. Where we do great work. I specialise in building responsive HTML5 templates styled with the Sass framework using the BEM methodology to ensure best practices for accessibility (WCAG 2.0 ‘AA’ (Double A)) and standards are met. I build with a mobile-up philosophy with graceful degradation and progressive enhancement. I tend to use vanilla JS now over jQuery but have experience of both. I have a working knowledge of integrating front-end templates into .NET and RoR applications, it's been a while since I've used PHP, but know that Laravel is making waves in the dev world. More recently I've started dabbling in Node and React. I've worked with clients such as: Green Flag, Pizza Express, South Yorkshire Police, Western Digital, NVidia, Microsoft, Best Western Hotels, Council for British Archaeology, Geographical Association, Meadowhall and Rotherham Metropolitan Borough Council. I even passed my Cycling Proficiency and I've got my 100 meters swimming badge. Although I'm sure I can swim much further than that now. :-)

Updated on June 03, 2022

Comments

Jonny Haynes almost 2 years
I'm currently building a 'search an area' feature for a site we're working on. A bit like the one on Rightmove.

I've got everything up and running except the ability to track event changes to a polygon (the setting of new points and altering existing ones). I need to be able to post the coordinates to the form for submission.

I've tried the Google Code docs for editing events. And every time I try it out, I either get a message about 'set_at' not being possible or my object not being defined.

I suppose the bit I know is wrong is thePolygon variable not being passed through to the new
```
google.maps.event.addListener(thePolygon, 'set_at', function() {
      // grab paths for infoWindow 
      grabPaths(thePath);
    });
```
But I don't know why. It's a global variable. Or is not?

So, the question is, how can I track the changes to the polygon to pass the updated coordinates through to my form?

All help is greatly appreciated.

Here is the code I currently have:
```
var mapOptions = {
  // options
};

var map = new google.maps.Map(document.getElementById('map'), mapOptions);

var drawingManager = new google.maps.drawing.DrawingManager({
  drawingMode: google.maps.drawing.OverlayType.POLYGON,
  drawingControl: false,
  polygonOptions: {
    // drawing options
  }
});

drawingManager.setMap(map);
  
google.maps.event.addListener(drawingManager, 'polygoncomplete', function(polygon) {
  // complete functions
});

google.maps.event.addListener(thePolygon, 'set_at', function() {
  // complete functions
});

google.maps.event.addListener(thePolygon, 'insert_at', function() {
  // complete functions
});
```
Jonny Haynes about 11 years

Ha ha, works a treat. I was so close, yet so far. Thanks for your help. It was greatly appreciated. It was the grabbing the path changes that I couldn't fathom out. Yet it was so simple.
jjwdesign over 10 years

See stackoverflow.com/questions/12515748/…
Raza Ahmed over 10 years

use polygon.getPath() instead of thePath
Admin over 10 years

This won't work for polygons with multiple paths. See stackoverflow.com/questions/20789385/…
Salil Luley about 4 years

How do I call class level functtion and variable inside set_at and insert_at event listeners?