How can i display this polygon on a Google Map?

Question

Hi folks,

I have some MultiPolygon data (The USA state of California) which I'm trying to display on a Google Map (v3 Javascript API).

The link to the data is here on CodePaste.NET. (Note: I pasted it there because the data would spam this post).

So I've tried to make it into some Json data .. and then display that MultiPolygon on a google map. It hangs/doesn't work :(

Here's the jQuery I've used...

function getTestData() {
    // Grab the California state data.
    var request = $.getJSON("/Foo/Bar?format=json", function (results) {
            // map it.
            var polygon = createGeoJsonPolygon(results, "#FF7800", "#46461F");
            polygon.setMap(map);
    });
}

function createGeoJsonPolygon(geojson, strokeColour, fillColour) {
    var coords = geojson.coordinates; // Array of polygons.
    var paths = [];

    $.each(coords, function (i, n) {
        $.each(n, function (j, o) {
            var path = [];
            $.each(o, function (k, p) {
                var ll = new google.maps.LatLng(p[1], p[0]);
                path.push(ll);
            });
            paths.push(path);
        });
    });

    return new google.maps.Polygon({
        paths: paths,
        strokeColor: strokeColour,
        strokeOpacity: 1,
        strokeWeight: 2,
        fillColor: fillColour,
        fillOpacity: 0.25
    });
}

Can anyone help? Anyone have a sec to give this a go and see if they can draw my sample data on a google map? I'm not sure if my code is wrong or the data as been extracted incorrectly.

Answer 1

You made the polygon; you didn't add it to any map.

Assuming map is a variable of type google.maps.Map, do this:

var poly = createGeoJsonPolygon( arg1, arg2, arg3 );
poly.setMap( map );

Also, note that your data (which you link to) is not (as you state) an array of points; it's an array of arrays of arrays of points.

Answer 2

Without encoding polygon contours, you can use only one contour per polygon, see docs: http://code.google.com/intl/ru/apis/maps/documentation/javascript/v2/reference.html#GPolygon. It accepts only an array of points, not contours.

Read about polygon encoding for google maps, there is a readymade js for that.

edit: docs for v3: http://code.google.com/intl/ru/apis/maps/documentation/javascript/reference.html#PolygonOptions

Answer 3

My post on Google Groups came to help save the day.

This is what was suggested :

function createGeoJsonPolygon(geojson, strokeColour, fillColour) {
    var coords = geojson.coordinates; // Array of polygons.
    var paths = [];

    $.each(coords, function (i, n) { 
        var path = []; 
        $.each(n, function (j, p) { 
            var ll = new google.maps.LatLng(p[1], p[0]); 
            path.push(ll); 
        }); 
        paths.push(path); 
    }); 

    return new google.maps.Polygon({ 
        paths: paths, 
        strokeColor: "#FF0000", 
        strokeOpacity: 0.8, 
        strokeWeight: 1, 
        fillColor: "#FF0000", 
        fillOpacity: 0.35, 
        map: map 
    }); 
}