Click here to Skip to main content
15,892,746 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
Hi!

I'm using google map API to design a "earthquake map". So far, so good.

The map displays nicely in Firefox and Chrome but raises a error in IE8:

Webpage error details

User Agent: Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 5.1; Trident/4.0; .NET CLR 1.1.4322; .NET CLR 2.0.50727; InfoPath.3)
Timestamp: Mon, 6 May 2013 10:36:29 UTC

Message: Script error
Line: 0
Char: 0
Code: 0
URI: http://maps.gstatic.com/intl/pt_ALL/mapfiles/api-3/12/10/main.js

<pre lang="Javascript">
<div id="map" style="width: 400px; height: 650px;"></div>
<!--[if IE]><script type="text/javascript" src="/excanvas.js"></script><![endif]-->
<script src="http://maps.google.com/maps/api/js?sensor=false"type="text/javascript"></script>
<script type="text/javascript"> 
var Parsed = [[]];
var txtFile;
 
//Atributes of Red Circle Icons.
function getCircle(magnitude) {
    "use strict";
    return {
        path: google.maps.SymbolPath.CIRCLE,
        fillColor: 'red',
        fillOpacity: 0.5,
        scale: Math.pow(2, magnitude) / Math.PI,
        strokeColor: 'black',
        strokeWeight: 0.5
    };
}
 
//CSV to Array function. Returns Parsed array.
function CSVToArray(strData, strDelimiter) {
    "use strict";
    strDelimiter = (strDelimiter || ",");
    var objPattern = new RegExp(
            ("(\\" + strDelimiter + "|\\r?\\n|\\r|^)"
             + "(?:\"([^\"]*(?:\"\"[^\"]*)*)\"|"
             + "([^\"\\" + strDelimiter + "\\r\\n]*))"
            ),
            "gi"
        );
    var arrData = [[]];
    var arrMatches = null;
    while (arrMatches = objPattern.exec(strData)) {
        var strMatchedDelimiter = arrMatches[1];
        if (strMatchedDelimiter.length && (strMatchedDelimiter !== strDelimiter)) {
            arrData.push([]);
        }
        if (arrMatches[2]) {
            var strMatchedValue = arrMatches[2].replace(
                new RegExp("\"\"",
                    "g"),
                "\""
            );
        } else {
            var strMatchedValue = arrMatches[3];
        }
        arrData[arrData.length - 1].push(strMatchedValue);
    }
    return arrData;
}

//Initializing connection
if (window.XMLHttpRequest) { // Mozilla, Safari, ...
    txtFile = new XMLHttpRequest(); 
} else if (window.ActiveXObject) { // IE 8 and older
    txtFile = new ActiveXObject("Microsoft.XMLHTTP");
}

//Tries to open file.
txtFile.open("GET", "http://foo/f4/stats/nServsCodigoPostal.csv", true);
txtFile.onreadystatechange = function() {
    "use strict";
    if (txtFile.readyState === 4) {  // Makes sure the document is ready to parse.
        if (txtFile.status === 200) {  // Makes sure it's found the file.
            var allText = txtFile.responseText;
            Parsed = new CSVToArray(allText, ";");
        }
    }

    //Locations apointed
    var locations = [
        ['Viana do Castelo', 41.6872711837914, -8.82476806640625, 0],
        ['Braga', 41.54944320851238, -8.414154052734375, 0],
        ['Porto', 41.15875373498798, -8.610706329345703, 0],
        ['Aveiro', 40.63896734381723, -8.648300170898438, 0],
        ['Vila Real', 41.30050773444147, -7.752227783203125, 0],
        ['Bragança', 41.80535774441799, -6.760368347167969, 0],
        ['Viseu', 40.64730356252251, -7.8936767578125, 0],
        ['Guarda', 40.53258931069557, -7.25921630859375, 0],
        ['Coimbra', 40.20195268954057, -8.433380126953125, 0],
        ['Leiria', 39.7462660621837, -8.81103515625, 0],
        ['Santarém', 39.774769485295465, -8.5693359375, 0],
        ['Castelo Branco', 39.82013946676259, -7.505035400390625, 0],
        ['Portalegre', 39.28860847419942, -7.42950439453125, 0],
        ['Lisboa', 38.72891158257716, -9.139251708984375, 0],
        ['Èvora', 38.56749535882734, -7.9046630859375, 0],
        ['Setúbal', 38.5299046000139, -8.876953125, 0],
        ['Beja', 38.01509916686995, -7.862606048583984, 0],
        ['Faro', 37.017905231730914, -7.922515869140625, 0]
    ];
 
    //Cycle through Parsed data from file and locations vector trying to match
    //Data and populate argument MAgnitude of icon.
    var i, j;
    for (i = 0; i < Parsed.length; i += 1) {
        var a = new String(Parsed[i][0]);
        Parsed[i][0] = a.replace(/[^a-z0-9]/gi, '');
        for (j = 0; j < locations.length; j += 1) {
            var b = new String(locations[j][0]);
            locations[j][0] = b.replace(/[^a-z0-9]/gi, '');
 
            if (Parsed[i][0] === locations[j][0]) {
                locations[j][3] = ((0.07 * Parsed[i][2]) + 4.875);
            }
        }
    }

    //Initializing map properties
    var map = new google.maps.Map(document.getElementById('map'), {
        zoom: 7,
        center: new google.maps.LatLng(39.50, -8.37),
        disableDefaultUI: true,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    });

	
    function addMarker(location) {
        var lat = location[1], lng = location[2],
            magnitude = location[3];
 
        var options = {
            position: new google.maps.LatLng(lat, lng),
            map: map
        };

        if (magnitude < 5) {
            options.animation = google.maps.Animation.BOUNCE;
        } else {
            options.icon = getCircle(magnitude);
        }
 
         var marker = new google.maps.Marker(options);
    }	

	//Adds Marker's
	var i;
    for (i = 0;  i < locations.length;  i += 1) {
        addMarker(locations[i]);
    }
};
txtFile.send(null);
</script>


I can't seem to find the problem with IE8...
Posted

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900