How can I get content out of Google Maps MVCArray? - google-maps

Question

I'm working with google.maps.polygons. The library uses a google.maps.MVCArray element to store the vertices of the polygon where each vertex contains a latitude and longitude variable. So I'm able to create fancy polygons on the fly using user mouse clicks.
var listener1 = google.maps.event.addListener(map, "click", function(e) {
var latLng = e.latLng;
var myMvcArray = new google.maps.MVCArray();
myMvcArray.push(latLng); // First Point
var myPolygon = new google.maps.Polygon({
map: map,
paths: myMvcArray, // one time registration reqd only
strokeColor: "#FF0000",
strokeOpacity: 1.0,
strokeWeight: 2,
fillColor: "#FF0000",
fillOpacity: 0.10,
editable: true,
draggable: false,
clickable: true
});
google.maps.event.removeListener(listener1);
var listener2 = google.maps.event.addListener(map, 'click', function(e) {
latLng = e.latLng;
myMvcArray.push(latLng);
console.log(myMvcArray.getArray());
});
});
My problem is, that console log result is incomprehensible. I've spent a couple of hours trying to figure out how to get clean data from myMvcArray. I need to use the data elsewhere.

Answer 1

So it turns out the trick is this:
console.log(myMvcArray.getArray()[0].lat(), myMvcArray.getArray()[0].lng() );
Which returns: XX.XX2157415679654 -XXX.XX782657623291
A For/Each loop will also work.
myMvcArray.getArray().forEach(function(value, index, array_x) {
console.log(" index: " + index + " value: " + value);
})
Which returns:
index: 0 value: (XX.XX2157415679654, -XXX.XX782657623291)
index: 1 value: (XX.XX209255908967, -XXX.XX77514743805)
Info offered in case anybody else has issues here. Note, too, the code above works pretty well for letting users define a google.maps.polygon on a map easily.

Answer 2

You can use JSON.stringify()
So your code would be
console.log(JSON.stringify(myMvcArray.getArray()))
This works because stringify calls the methods on the MVCArray to get the contents whereas log doesn't.