JSON string changes its keys for Google MAPS API v3 - json

Question

I've seen this question a few times already on here but the responses aren't quite applicable to my case.
I am using a google.maps.Polygon object to save bounds that is drawn on a map.
Later I am using the "getPath" method and I add this to a Json string.
The JSON string is always different. Sometimes I can grab the polygon corners by:
thisShape.data.b[i].kb
thisShape.data.b[i].lb
other times by
thisShape.data.b[i].Qa
thisShape.data.b[i].Ra
etc.
It seems over time, the key for the Json string changes. However I am not responsible what the Google Api returns as far the Polygon object goes.
Is there a way to grab the longtitute and latitude without knowing the key?
Any ideas how to loop through my polygons without fear that it'll break in a few weeks?
Many thanks
Suppose you have a method called "SavePolygonData" that, among other things, creates a Json string like this:
var allData = {};
$("div.shapes").each(function(){
var id = $(this).attr("id");
var type = id.split('_')[0];
var feature = MapToolbar.features[type+'Tab'][id];
var vertices = feature.getPath();
allData[id] = { color: feature.fillColor, data: vertices};
});
var allDataJson = JSON.stringify(allData);
and then later another method that reads the json string somewhere else like this:
for (var polyId in allData) {
if (allData.hasOwnProperty(polyId)) {
var thisShape = allData[polyId];
var color = thisShape.color;
var vertices=new Array();
for ( var i=0; i<thisShape.data.b.length; ++i )
{
var coordX = thisShape.data.b[i].kb; //Problem here
var coordY = thisShape.data.b[i].lb; //Problem here
var point = new google.maps.LatLng(coordX, coordY);
vertices[i] = point;
}
var poly = new google.maps.Polygon({
strokeWeight: 2,
fillColor: color,
paths: vertices
});
poly.setMap(map);
}
I can't use the getLat() methods on the json string because obviously it only contains strings. Instead I have to create a new data structure for my "data" variable that contains processed data instead of feature.getPath().
That's what I need help with. What is the structure of that new data structure?
I have noticed there is the google.maps.geometry.encoding.encodePath() method.
But I need to be able to decode it in server side.

Answer 1

The problem in your SavePolygonData example code is that you are trying to use the vertices data directly in your JSON object. Instead, you need to use the documented methods to get the latitude and longitude values from the vertex array and serialize those.
To fix it, you can change this code:
var vertices = feature.getPath();
allData[id] = { color: feature.fillColor, data: vertices};
to:
var vertices = getLatLngVertices( feature.getPath() );
allData[id] = { color: feature.fillColor, data: vertices };
and elsewhere define this function:
function getLatLngVertices( path ) {
var pathArray = path.getArray();
var vertices = [];
for( var i = 0, n = pathArray.length; i < n; i++ ) {
var latLng = pathArray[i];
vertices.push({ lat: latLng.lat(), lng: latLng.lng() });
}
return vertices;
}
Now in your code that parses this JSON you can use:
var data = thisShape.data;
for( var i = 0, n = data.length; i < n; ++i ) {
var point = data[i];
vertices[i] = new google.maps.LatLng( point.lat, point.lng );
}

Answer 2

It looks like getPath() returns an MVCArray of LatLng, from which you are supposed to extract latitude and longitude by calling the lat() and lng() methods, not by directly accessing properties. If it were possible in JavaScript, these properties would have been declared private. But the same applies to the MVCArray, for which you have the choice of looping over with forEach(), or, if are not at ease with lambda functions yet, with getAt(), using the result of getLength() as guard:
polygon.getPath().forEach(function(latLng, idx) {
var lat = latLng.lat();
var lng = latLng.lng();
// do something
});
or
var path = polygon.getPath();
var len = path.getLength();
for (var idx = 0; idx < len; idx++) {
var latLng = path.getAt(idx);
var lat = latLng.lat();
var lng = latLng.lng();
// do something
}
These examples are OK if the polygon consists of only one path. If not, you will have to loop over paths too.