I am attempting to include multiple polygons for London boroughs, but I am encountering an issue where I can't display more than one polygon at a time. Additionally, when I change the order of the boroughs, the polygon disappears. Here is the HTML function code that I'm using:
<script>
function initialize() {
var map = new google.maps.Map(document.getElementById('map_canvas'), {
center: new google.maps.LatLng(51.50722, -0.12750),
mapTypeId: google.maps.MapTypeId.ROADMAP,
zoom: 11
});
var points = new google.maps.MVCArray();
for (var y in borough) {
var area = borough[y];
var location = new google.maps.LatLng(area.lat,area.lng);
points.push(location );
}
var polygonOptions = {path:points,map:map, fillColor:"#d3d3d3"};
var polygon1 = new google.maps.Polygon(polygonOptions);
var polygon2 = new google.maps.Polygon(polygonOptions);
polygon.setMap(map);
var polyline = new google.maps.Polyline({path:points,map:map});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
var borough = [{"name":"City of London","PointID":1,"PolygonID":294,"SubPolygonID":1,"lat":51.52028098,"lng":-0.085197314,"AvgPropertyVal":532562},
{"name":"City of London","PointID":2,"PolygonID":294,"SubPolygonID":1,"lat":51.51976087,"lng":-0.08330491,"AvgPropertyVal":532562},
{"name":"City of London","PointID":3,"PolygonID":294,"SubPolygonID":1,"lat":51.52070385,"lng":-0.081741648,"AvgPropertyVal":532562},
...
...[data continues]
...
{"name":"City of London","PointID":55,"PolygonID":294,"SubPolygonID":1,"lat":51.51875522,"lng":-0.08620691,"AvgPropertyVal":532562,},
{"name":"City of London","PointID":56,"PolygonID":294,"SubPolygonID":1,"lat":51.52028098,"lng":-0.085197314,"AvgPropertyVal":532562},
];