Recently, I came across an example illustrating a simple polygon. However, I wanted to display countries with complex polygons (multipolygons for some countries). Let me demonstrate the process:
Example:
"type": "Feature",
"properties": {
"Name": "Country_with_multiple_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);
}