title: How to get latitude and longitude of all polygon points in Google Maps API v3?
body: <p>I have a user draw a polygon on the map. Once they complete the polygon I can get the coordinates of each point to display on the page. If they move the polygon after completing it, the coordinates will update with the movement. Is there a way I can break this up to show the latitude and longitude of all points the user creates separately and update with movement?</p>
  
  <p>Currently it displays like this:</p>
  
  <p>Coordinates</p>
  
  <p>(37.71859032558816, -121.563720703125),(38.10862766432127, -120.1904296875),(36.77409249464195, -120.08056640625),(36.2354121683998, -117.784423828125),(35.951329861522666, -119.8828125)</p>
  
  <p>I would like to break it up and have it display something like this:</p>
  
  <p>Shape 1:</p>
  
  <p>Latitude:</p>
  
  <p>Point 1: 37.71859032558816</p>
  
  <p>Point 2: 38.10862766432127</p>
  
  <p>Point 3: 36.77409249464195</p>
  
  <p>Point 4: 36.2354121683998</p>
  
  <p>Point 5: 35.951329861522666</p>
  
  <p>Longitude:</p>
  
  <p>Point 1: -121.563720703125</p>
  
  <p>Point 2: -120.1904296875</p>
  
  <p>Point 3: -120.08056640625</p>
  
  <p>Point 4: -117.784423828125</p>
  
  <p>Point 5: -119.8828125</p>
  
  <p>Here is what I currently have:  </p>
  
  <pre><code>google.maps.event.addListener(drawingManager, 'overlaycomplete', function(e)
  {
      drawingManager.setDrawingMode(null);
      shapes.add(e);
      // getPath(): return value: MVCArray&lt;LatLng&gt;
      // getArray(): return value: Array&lt;LatLng&gt;
      var arrayOne = e.overlay.getPath().getArray();
      document.getElementById('coordinates').innerHTML = arrayOne;
  
      // var latitude = ?
      // var longitude = ?
  
      document.getElementById('latitude').innerHTML = latitude;
      document.getElementById('longitude').innerHTML = longitude;
  
      google.maps.event.addListener(e.overlay.getPath(), 'set_at', function()
      {
          // getPath(): return value: MVCArray&lt;LatLng&gt;
          // getArray(): return value: Array&lt;LatLng&gt;
          var arrayOne = e.overlay.getPath().getArray();
          document.getElementById('coordinates').innerHTML = arrayOne;
  
          // var latitude = ?
          // var longitude = ?
  
          document.getElementById('latitude').innerHTML = latitude;
          document.getElementById('longitude').innerHTML = longitude;
      });
  
      google.maps.event.addListener(e.overlay.getPath(), 'insert_at', function()
      {
          // getPath(): return value: MVCArray&lt;LatLng&gt;
          // getArray(): return value: Array&lt;LatLng&gt;
          var arrayOne = e.overlay.getPath().getArray();
          document.getElementById('coordinates').innerHTML = arrayOne;
  
          // var latitude = ?
          // var longitude = ?
  
          document.getElementById('latitude').innerHTML = latitude;
          document.getElementById('longitude').innerHTML = longitude;
        });
  });
  </code></pre>
  
  <p>I have come across a few things such as getAt(), geometry.location.lat(), and LatLng class, but I have not had any luck. I would appreciate any help, thanks.</p>