Displaying polygons from JSON file with Google Maps API

Question

I'm able to load a JSON file into a page (currently using jQuery), and set the content as a variable in the page.

The JSON includes references to building outlines, as follows;

[
    {
        "buildingNumber":"7",
        "buildingDescription":"Building Seven",
        "spatial":{
            "points":
                [
                    "-1.2345678,50.9876543",
                    "-1.2345677,50.9876544",
                    "-1.2345676,50.9876545",
                    "-1.2345675,50.9876546"
                ]
        }
    }
]

Using jQuery's $.each, I can load the variable and iterate through the buildings, additionally, per building, I can iterate through the points quite simply.

The problem comes with the fact that Google only appear to document the following method for describing polygons;

var triangleCoords = [
    new google.maps.LatLng(25.774252, -80.190262),
    new google.maps.LatLng(18.466465, -66.118292),
    new google.maps.LatLng(32.321384, -64.75737)
];

That makes sense, but I can't see how to get from the arrays I currently have to this format. I'd really appreciate any pointers on where to start in moving from one to the other, or another way to describe the polygons.

I've looked into the array.push() function, and while it seems like the locical way to go, I can't see how to dynamically create variables based on the iterative values from the array.

Thanks

score 2 · Answer 1 · answered Apr 01 '13 at 18:23

Currently your points are strings. Convert them to google.maps.LatLng objects:

var point = "-1.2345678,50.9876543";
var coords = point.split(",");
var pt = new google.maps.LatLng(parseFloat(coords[0]), 
                                parseFloat(coords[1]));

Then push the resulting google.maps.LatLng objects onto your "path" array for the Polygons.

score 0 · Answer 2 · answered Apr 01 '13 at 18:27

You've got an array of strings representing latitude and longitude, and you need an array of google.maps.LatLng. I'd use the array.map() function - docs here.

var polyCoords = spatial.points.map(function(point) {
    var pointCoords = point.split(',');
    return new google.maps.LatLng(
        parseFloat(pointCoords[0]),
        parseFloat(pointCoords[1]));
});

Displaying polygons from JSON file with Google Maps API

2 Answers2

Linked