Getting points of multiple polygon google maps api

Question

I have gone through several similar questions, yet could not find a solution of my issue. I want to get the points of coordinates in this way [(lat,lng),(lat,lng)..] etc. All i m getting in result is {"pp":[{"polygonjson":[{},{},{},{},{}]}]} even though values are coming fine.Please have a look on my code.

function getCordinates() {
  var pp = [];
  var item = {};
  item.pp = pp;

  var currentCoordinates = "";
  console.log(polygons.length);
  for (var i = 0; i < polygons.length; i++) {
    var poly = polygons[i];
    var polygonsjson = {};
    var polygonjson = [];
    polygonsjson.polygonjson = polygonjson;
    for (var polyPointArray = 0; polyPointArray <poly.getPath().getArray().length; polyPointArray++)
    {
      polygonsjson.polygonjson.push(poly.getPath().getArray()[polyPointArray]); // the issue is in this line
    }
    item.pp.push(polygonsjson);
  }
  if (polygons.length == 0)
  { 
    document.getElementById('<%= hdCordinates.ClientID %>').value = ""; 
  }
  else 
  {
    document.getElementById('<%= hdCordinates.ClientID %>').value =   JSON.stringify(item);
  }

}

Answer 1

A google.maps.LatLng object has a .lat() method that returns the latitude and a .lng() method that returns the longitude.

Something like this returns your "polygonjson" as a LatLngLiteral:

for (var i = 0; i < polygons.length; i++) {
  var poly = polygons[i];
  var polygonsjson = {};
  var polygonjson = [];
  polygonsjson.polygonjson = polygonjson;
  for (var polyPointArray = 0; polyPointArray <poly.getPath().getArray().length; polyPointArray++) {
    polygonsjson.polygonjson.push({lat:poly.getPath().getArray()[polyPointArray].lat(),lng:poly.getPath().getArray()[polyPointArray].lng()}); 
  }
  item.pp.push(polygonsjson);
}
if (polygons.length == 0) { 
  document.getElementById('polycoords').value = ""; 
} else {
  document.getElementById('polycoords').value =   JSON.stringify(item);
}

proof of concept fiddle

code snippet:

var polygons = [];
var item = {
  pp: []
};

function initialize() {
  var mapOptions = {
    center: new google.maps.LatLng(10, 10),
    zoom: 4,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };
  var map = new google.maps.Map(document.getElementById("map_canvas"),
    mapOptions);

  var coords2 = [
    new google.maps.LatLng(8, 10),
    new google.maps.LatLng(12, 10),
    new google.maps.LatLng(12, 17),
    new google.maps.LatLng(8, 17),
    new google.maps.LatLng(8, 10)
  ];

  var coords3 = [
    new google.maps.LatLng(16, 12),
    new google.maps.LatLng(18, 12),
    new google.maps.LatLng(18, 15),
    new google.maps.LatLng(16, 15),
    new google.maps.LatLng(16, 12)
  ];

  var polygon = new google.maps.Polygon({
    paths: [coords2],
    strokeColor: '#FF0000',
    strokeOpacity: 0.8,
    strokeWeight: 1,
    fillColor: '#00FF00',
    fillOpacity: 0.35
  });
  // alert(coords);
  polygon.setMap(map);
  polygons.push(polygon);
  var polygon2 = new google.maps.Polygon({
    paths: [coords3],
    strokeColor: '#FF0000',
    strokeOpacity: 0.8,
    strokeWeight: 1,
    fillColor: '#00FF00',
    fillOpacity: 0.35
  });
  // alert(coords);
  polygon2.setMap(map);
  polygons.push(polygon2);

  for (var i = 0; i < polygons.length; i++) {
    var poly = polygons[i];
    var polygonsjson = {};
    var polygonjson = [];
    polygonsjson.polygonjson = polygonjson;
    for (var polyPointArray = 0; polyPointArray < poly.getPath().getArray().length; polyPointArray++) {
      polygonsjson.polygonjson.push({
        lat: poly.getPath().getArray()[polyPointArray].lat(),
        lng: poly.getPath().getArray()[polyPointArray].lng()
      }); // the issue is in this line
    }
    item.pp.push(polygonsjson);
  }
  if (polygons.length == 0) {
    document.getElementById('polycoords').value = "";
  } else {
    document.getElementById('polycoords').value = JSON.stringify(item);
  }


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

html,
body,
#map_canvas {
  height: 500px;
  width: 500px;
  margin: 0px;
  padding: 0px
}

<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<div id="map_canvas" style="width:750px; height:450px; border: 2px solid #3872ac;"></div>
<input id="polycoords" size="300" />