-2

Found this example to show a simple polygon, but I tried to show coutries with complex polygon (multipolygon for something countries) Let me show the way

Example:

"type": "Feature",
    "properties": {
        "Name": "Country_whit_multiples_polygons",
        "Description": ""
    },"geometry": {
    "type": "MultiPolygon",
    "coordinates": [
        [
            [-94.963194, 39.316858],
            [-94.959670, 39.321990],
            [-94.955570, 39.316610],
            [-94.963194, 39.316858]
        ],
        [
            [-35, 34],
            [-41, 37],
            [-43, 38],
            [-25, 39]
        ]
    ]
}

var sector_data = {
    "type": "FeatureCollection",
    "features": [{
        "type": "Feature",
        "properties": {
            "Name": "Country_1",
            "Description": ""
        },
        "geometry": {
            "type": "Polygon",
            "coordinates": [
                [
                    [-94.963194, 39.316858],
                    [-94.959670, 39.321990],
                    [-94.955570, 39.316610],
                    [-94.963194, 39.316858]
                ]
            ]
        }
    }, {
        "type": "Feature",
        "properties": {
            "Name": "COuntry_2",
            "Description": ""
        },
        "geometry": {
            "type": "Polygon",
            "coordinates": [
                [
                    [-94, 36],
                    [-94, 35],
                    [-95, 34],
                    [-98, 32],
                    [-90, 31]
                ]
            ]
        }
    }]
};
var map;

function initialize() {
    var kansas_city = new google.maps.LatLng(39.00495613,-94.64780668);
    var mapOptions = {
        zoom: 10,
        center: kansas_city,
        mapTypeId: google.maps.MapTypeId.TERRAIN
    };
    map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);
    sector_callback(sector_data);
}

  // Loop through the results array and place a marker for each
  // set of coordinates.
window.sector_callback = function(results) {
  var bounds = new google.maps.LatLngBounds();
  for (var i = 0, len = results.features.length; i < len; i++) {
    var coords = results.features[i].geometry.coordinates[0];
    var path = [];
    document.getElementById('coords').innerHTML += "Polygon "+i+"<br>";
    for ( var j = 0; j < coords.length; j++ ){
        // alert("coords["+j+"][1]="+coords[j][1]+", coords["+j+"][0]="+coords[j][0]);
        var pt = new google.maps.LatLng(coords[j][1], coords[j][0])
        bounds.extend(pt);
        path.push(pt);
    document.getElementById('coords').innerHTML += coords[j]+"<br>";
    }

    var polygons = new google.maps.Polygon({
      path: path,
                 strokeColor: "#FF0000",
                 strokeOpacity: 0.8,
                 strokeWeight: 1,
                 fillColor: "#FF0000",
                 fillOpacity: 0.35,
      map: map
    });
  }
  map.fitBounds(bounds);
}
doppelgreener
  • 4,809
  • 10
  • 46
  • 63
  • 2
    So, what is your question exactly? – Huá dé ní 華得尼 May 14 '15 at 11:46
  • See [google maps API v3 - how to draw dynamic polygons/polylines?](http://stackoverflow.com/questions/3394961/google-maps-api-v3-how-to-draw-dynamic-polygons-polylines) – Yogi May 14 '15 at 12:30
  • Thanks Hwathanie. On top questions webmaster edit my question higthlight. Please see fragment "Country_whit_multiples_polygons". The code I posted below "var sector_data" its ok. But only for Polygons. I tried read a Json with MultiPolygons, and can't read if array is polygon or multipolygon to set map. – Enrique Alejandro Ogalde May 14 '15 at 13:38

1 Answers1

0

My own answer, for who need.

Data from js file:

var sector_data = {
    "type": "FeatureCollection",
    "features": [
{
"type": "Feature",
"properties":{"Name": "Bolivia","Description": "-","Color":"#ff9900"},
"geometry":{"type": "Polygon","coordinates":

[

[
[-58.159,-20.164], ... [-65.313,-10.253], ... [-58.159,-20.164]
]

]
}// close geometry
}// close pais
 // using "," 

,

{
"type": "Feature",
"properties":{"Name": "Cuba","Description": "-","Color":"#552233"},
"geometry":{"type": "Polygon","coordinates":

[



[
[-82.561,21.5716], ... , [-82.561,21.5716]
]
,
[
[-77.669,21.9519], ... , [-77.669,21.9519]
]
,
[
MORE POLYGONS
]

]
}// cierra geometry
}// cierra pais
 // uso","



    ]
}; // END. NOTE YoU MUST DELETE '//' AND REST...



var map;

function initialize() {
    var latinoamerica = new google.maps.LatLng(-5,-63);
    var mapOptions = {
        zoom: 10,
        center: latinoamerica,
        mapTypeId: google.maps.MapTypeId.HYBRID,
        panControl: true,
        panControlOptions: {
        position: google.maps.ControlPosition.LEFT_TOP
        },
        zoomControl: true,
        zoomControlOptions: {
        style: google.maps.ZoomControlStyle.LARGE,
        position: google.maps.ControlPosition.LEFT_TOP
    },
    scaleControl: true,
    streetViewControl: false,
    };
    map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);
    sector_callback(sector_data);
}

  // Loop through the results array and place a marker for each
  // set of coordinates.
window.sector_callback = function(results) {
var bounds = new google.maps.LatLngBounds();
for (var i = 0, len = results.features.length; i < len; i++) {
//console.log(i)
//document.getElementById('coords').innerHTML += "Polygon "+results.features[i].properties.Name+"<br>";
Color = results.features[i].properties.Color
cualpais = results.features[i].properties.Name
//console.log(nombre)
for (var a=0;a < results.features[i].geometry.coordinates.length; a++ ){
var coords = results.features[i].geometry.coordinates[a];
//console.log(a)
var path = [];
    for ( var j = 0; j < coords.length; j++ ){
    // alert("coords["+j+"][1]="+coords[j][1]+", coords["+j+"][0]="+coords[j][0]);
    var nombre = new google.maps.LatLng(coords[j][1], coords[j][0])
    bounds.extend(nombre);
    path.push(nombre);
    //document.getElementById('coords').innerHTML += coords[j]+"<br>";
    }
    var nombre = new google.maps.Polygon({
      path: path,
      strokeColor: "#f5f5f5",
      strokeOpacity: 0.6,
      strokeWeight: 1,
      fillColor: Color,
      fillOpacity: 0.35,
      clickable: true,
      //map: map
     //console.log(map)
     // console.log(nombre)
    });
    nombre.setMap(map);


}
    map.fitBounds(bounds);
}}