I am developing a web page with vb.net on the server side and some javascript on the .aspx page for google maps. The web page is a big GIS thing that maps out all of the block groups of Georgia within certain counties, so it's about 15MB of pure [latitude,longitude] points in a .js file. In chrome/firefox, the map loads up, then the script is loaded which triggers a callback to draw the polygons it defines, and the polygons are drawn onto the map. In IE, the map is loaded, and when the script is loaded the console has a SCRIPT14: error -2147024882 on line 1. Everything displays correctly besides the polygons on the map. The structure of the .js file is a declaration of only a couple of variables.
var allPolys = [
[
//poly1 points
[x1,y1],
[x2,y2],
...
],
[
//next poly
[x1,y1],
...
]
]
^^ is how each polygon is defined in the .js. Is this a size issue because all of the points are within a single array?
mapping code:
function drawPolys() {
for (var i = 0; i < allTracts.length; i++) {
var tract = "new google.maps.Polygon({ strokeWeight: 0.7, path: [";
for (var j = 0; j < allTracts[i].length; j++)
tract += " new google.maps.LatLng(" + allTracts[i][j][0] + "," + allTracts[i][j][1] + "),";
tract = tract.substring(0, tract.length - 1) + "], map: map });";
eval(tract);
}
//this is all for other 'multipolygons' that are in some maps
var colors = ['red', 'blue', 'green', 'orange', 'yellow', 'white'];
for (var i = 0; i < multiPolys.length; i++) {
for (var j = 0; j < multiPolys[i].length; j++) {
var subTract = "new google.maps.Polygon({ strokeWeight: 1.5, strokeColor: '" + colors[i % colors.length] + "', fillColor: '" + colors[i % colors.length] + "', path: [";
for (var k = 0; k < multiPolys[i][j].length; k++)
subTract += " new google.maps.LatLng(" + multiPolys[i][j][k][0] + "," + multiPolys[i][j][k][1] + "),";
subTract = subTract.substring(0, subTract.length - 1) + "], map: map });";
eval(subTract);
}
}
}
In Chrome the page loads beautifully.
edit : the new mapping function without eval()'s
function drawPolys() {
for (var i = 0; i < allTracts.length; i++) {
var path = [];
for (var j = 0; j < allTracts[i].length; j++)
path.push(new google.maps.LatLng(allTracts[i][j][0],allTracts[i][j][1]));
new google.maps.Polygon({ strokeWeight: 0.7, path: path, map: map });
}
var colors = ['red', 'blue', 'green', 'orange', 'yellow', 'white'];
for (var i = 0; i < multiPolys.length; i++) {
var path = [];
for (var j = 0; j < multiPolys[i].length; j++) {
path[j] = [];
for (var k = 0; k < multiPolys[i][j].length; k++)
path[j].push(new google.maps.LatLng(multiPolys[i][j][k][0],multiPolys[i][j][k][1]));
}
new google.maps.Polygon({ strokeWeight: 1.5, strokeColor: colors[i % colors.length], fillColor: colors[i % colors.length], paths: path, map: map });
}
}