How to Draw Polygon From JSON on Google Map

Question

I have a JSON string which contains two polygon. Can you please let me know how I can update following code to loop and parse both polygons from below JSON

 // Construct the polygon.
  polys = new google.maps.Polygon({
    paths: triangleCoords,
    strokeColor: '#FF0000',
    strokeOpacity: 0.8,
    strokeWeight: 2,
    fillColor: '#FF0000',
    fillOpacity: 0.35
  });

  polys.setMap(map);
}

and the JSON file looks like:

[
   {
      "type":"POL",
      "id":0,
      "geometry":[
         [
            49.27026877996669,
            -122.8927230834961
         ],
         [
            49.2489827405684,
            -122.91366577148438
         ],
         [
            49.23732754665601,
            -122.86869049072266
         ]
      ]
   },
   {
      "type":"POL",
      "id":1,
      "geometry":[
         [
            49.235310022288814,
            -122.90027618408203
         ],
         [
            49.229032752799334,
            -122.91950225830078
         ],
         [
            49.2202880838794,
            -122.88002014160156
         ]
      ]
   }
]

I am not sure that the json data is in correct format and to be honest not sure how to declare it in the code. Can you please help me to figure it out how to run this. thanks

Answer 1

(function() {
  var polygons = [];

  var json = [
     {
        "type":"POL",
        "id":0,
        "geometry":[
           [
              49.27026877996669,
              -122.8927230834961
           ],
           [
              49.2489827405684,
              -122.91366577148438
           ],
           [
              49.23732754665601,
              -122.86869049072266
           ]
        ]
     },
     {
        "type":"POL",
        "id":1,
        "geometry":[
           [
              49.235310022288814,
              -122.90027618408203
           ],
           [
              49.229032752799334,
              -122.91950225830078
           ],
           [
              49.2202880838794,
              -122.88002014160156
           ]
        ]
     }
  ];

  json.forEach(function(record){
     var path = [];
     record.geometry.forEach(function(point){
        path.push(new google.Maps.LatLng(point[0], point[1]));
     });

     // Construct the polygon.
     var polygon = new google.maps.Polygon({
        paths: path,
        strokeColor: '#FF0000',
        strokeOpacity: 0.8,
        strokeWeight: 2,
        fillColor: '#FF0000',
        fillOpacity: 0.35,
        map: map
     });

     polygons.push(polygon);
  });
})();

Answer 2

Are each of those a separate polygon object, or is it a single complex polygon (multiple closed loops)? First, you'll need to setup a new google.maps.MVCArray() and store each of the points inside of it. To do this, you need to loop through each object's geometry tag within the JSON, and within each of those create a new google.maps.LatLng( geometry[i][0], geometry[i][0]) to push into the MVCArray.

Once that's done, you can set the polygon path to the MVCArray that was created. If you are creating a single polygon object with multiple paths, then you'll need to push the MVCArray into a parent MVCArray and set that as the path to the polygon.

So something like this:

function parseJSON( json ) {
    var types = [],
        polygons = [];

    //Setup all the paths inside polygons
    json.forEach( function(rec) {
        var loc = types.indexOf(rec.type);
        //Setup new type if it doesn't exist
        if( loc === -1 ) {
            loc = types.length;
            types.push( rec.type );
            polygons.push( new google.maps.MVCArray() );
        }
        var arr = new google.maps.MVCArray();
        rec.geometry.forEach( function( latLng ) {
            arr.push( new google.maps.LatLng( latLng[0], latLng[1] ) );
        });
        //Each polygons item now is a set of similarly typed set of coordinates
        polygons[loc].push(arr);
    });
    //Loop through finished set
    polygons.forEach( function(polyPath) {
        //Construct polygon using the path provided
        var polygon = new google.maps.Polygon({
            paths: polyPath,
            strokeColor: '#FF0000',
            strokeOpacity: 0.8,
            strokeWeight: 2,
            fillColor: '#FF0000',
            fillOpacity: 0.35,
            map: map
        });
    });
}

But this basically creates a multiple complex polygons that are each relevant to the type they were made with. Code is untested, but looks appropriate based on using parseJSON as a callback function.

Answer 3

You have this cute utility from JasonSanford - geojson-google-maps