在Internet Explorer 9中刷新后不会加载Google Maps API

Question

I have successfully created a map in Chrome and Firefox that displays kmz files, a single marker and the users current location. The kmz file loaded is based on info that is retrieved using php from an external domain. Currently when I load the page with IE 9, it loads successfully and I can browse around the map and use my other controls.

The problem occurs when I refresh. The map doesn't come up. Everything else on the page loads successfully. I thought it may have something to do with the markers but when I removed it I still get the same problem. I also ran my code through a program to catch trailing commas and missing semicolons. Nothing! The other strange thing is that there are no errors in the IE9 debugger.

Here is the code below:

        var map;
        var cstage;
        var cFor;
        var KML = new Array();
        var KML_def;
        var FI;
        var Fnum;
        var OI;
        var Onum;
        var ObsV = new Array(); //observed values
        var ObsT = new Array(); //observed time
        var ForV = new Array(); //forecasted values
        var ForT = new Array(); //forecasted time
        var myKmlOptions = {
            preserveViewport: true
        };

        //gets the current forecast
        function getForecast() {
            $.ajax({
                type: "GET",
                url: "/centralia/proxy.php",
                data: { requrl: "http://water.weather.gov/ahps2/hydrograph_to_xml.php?gage=cenw1&output=xml" },
                dataType: 'xml',
                success: function(xml) { parseXml(xml); }
            });
        }

        //parses the xml forecast data to get the observed and forecasted values
        function parseXml(xml) {
            var $xml = $(xml);
            var i;

            i = 1;
            Fnum = 0; //forecasted
            Onum = 0; //observed
            FI = 0;

            cFor = Date.now();
            $xml.find("forecast").children("datum").each(function() {
                ForV[i] = $(this).children("primary").text();
                var year = $(this).children("valid").text().substr(0, 4);
                var month = $(this).children("valid").text().substr(5, 2);
                var day = $(this).children("valid").text().substr(8, 2);
                var hour = $(this).children("valid").text().substr(11, 2);
                var min = $(this).children("valid").text().substr(14, 2);
                var sec = $(this).children("valid").text().substr(17, 2);
                ForT[i] = new Date(Date.UTC(year, month - 1, day, hour, min, sec));
                i = i + 1;
                Fnum = Fnum + 1;
            });

            i = 0;
            $xml.find("observed").children("datum").each(function() {
                ObsV[i] = $(this).children("primary").text();
                var year = $(this).children("valid").text().substr(0, 4);
                var month = $(this).children("valid").text().substr(5, 2);
                var day = $(this).children("valid").text().substr(8, 2);
                var hour = $(this).children("valid").text().substr(11, 2);
                var min = $(this).children("valid").text().substr(14, 2);
                var sec = $(this).children("valid").text().substr(17, 2);
                ObsT[i] = new Date(Date.UTC(year, month - 1, day, hour, min, sec));
                i = i + 1;
                Onum = Onum + 1;
            });

            cstage = ObsV[0];
            cFor = ObsT[0]; 

            //format time
            var c_mins = cFor.getMinutes();
            var c_Hrs = cFor.getHours();
            var a_p = "";

            if (c_Hrs < 12) {
                a_p = "AM";
            }
            else {
                a_p = "PM";
            }
            if (c_Hrs === 0) {
                c_Hrs = 12;
            }
            if (c_Hrs > 12) {
                c_Hrs = c_Hrs - 12;
            }

            c_mins = c_mins + "";

            if (c_mins.length == 1) {
                c_mins = "0" + c_mins;
            }

            //write out values to html div
            $("#forcastVal").text(cstage.concat(" ft"));
            $("#forcastDat").text(cFor.getMonth() + '/' + cFor.getDate() + '/' + cFor.getFullYear() + ' ' + c_Hrs + ':' + c_mins + ' ' + a_p);
            $("#ForIndicator").text("(observed value)");
            setMenu();
        }

        //initialize function
        function initialize() {

            var myOptions =
        {
            zoom: 8,
            mapTypeId: google.maps.MapTypeId.HYBRID

            // sets the type of map to be displayed
            // HYBRID - displays a transparent layer of major streets on satellite images
            // ROADMAP - displays a normal street map 
            // SATELLITE - displays satellite images
            // TERRAIN - displays maps with physical features such as terrain
        };
            map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
            KML_def = new google.maps.KmlLayer('https://dl.dropboxusercontent.com/u/7710611/Flood_Poly_161ft.kml');

            //add a marker for the station
            var myLatLng = new google.maps.LatLng(46.711667, -122.9775);
            var Marker_CenPoint = new google.maps.Marker({
                position: myLatLng,
                map: map,
                title: 'Chehalis River at Centralia'
            });

            KML_def.setMap(map);
            Marker_CenPoint.setMap(map);

            Marker_CenPoint.info = new google.maps.InfoWindow({
                content: '<a href="http://water.weather.gov/ahps2/hydrograph.php?wfo=sew&gage=cenw1" target="_blank">Chehalis River at Centralia</a>'
            });

            google.maps.event.addListener(Marker_CenPoint, 'click', function() {
                Marker_CenPoint.info.open(map, Marker_CenPoint);
            });

            //initial kmz load (all kmz files)
            KML[1] = new google.maps.KmlLayer('1.kml', myKmlOptions);
            KML[2] = new google.maps.KmlLayer('2.kml', myKmlOptions);
            KML[3] = new google.maps.KmlLayer('3.kml', myKmlOptions);
            KML[4] = new google.maps.KmlLayer('4.kml', myKmlOptions);
            KML[5] = new google.maps.KmlLayer('5.kml', myKmlOptions);
            KML[6] = new google.maps.KmlLayer('6.kml', myKmlOptions);
            KML[7] = new google.maps.KmlLayer('7.kml', myKmlOptions);
            KML[8] = new google.maps.KmlLayer('8.kml', myKmlOptions);
            KML[9] = new google.maps.KmlLayer('9.kml', myKmlOptions);
            KML[10] = new google.maps.KmlLayer('10.kml', myKmlOptions);
            KML[11] = new google.maps.KmlLayer('11.kml', myKmlOptions);
            KML[12] = new google.maps.KmlLayer('12.kml', myKmlOptions);
            KML[13] = new google.maps.KmlLayer('13.kml', myKmlOptions);
            KML[14] = new google.maps.KmlLayer('14.kml', myKmlOptions);

            //add current location marker
            var myloc = new google.maps.Marker({
                clickable: false,
                icon: new google.maps.MarkerImage('//maps.gstatic.com/mapfiles/mobile/mobileimgs2.png',
                    new google.maps.Size(22, 22),
                    new google.maps.Point(0, 18),
                    new google.maps.Point(11, 11)),
                shadow: null,
                zIndex: 999,
                map: map
            });

            if (navigator.geolocation) {
                navigator.geolocation.getCurrentPosition(function(pos) {
                    var me = new google.maps.LatLng(pos.coords.latitude, pos.coords.longitude);
                    myloc.setPosition(me);
                });
            }
            else {
                alert("Geolocation is not available");
            }

            //get current forecast
            getForecast();

        }
function twentyOFour(LNo, cell) {
            //loop through all cells and change color
            //for (k = 1; 4; k++) {
            var x = document.getElementById("t1").getElementsByTagName("td");
            x[0].style.backgroundColor = "#dcdcdc";
            x = document.getElementById("t2").getElementsByTagName("td");
            x[0].style.backgroundColor = "#dcdcdc";
            x[1].style.backgroundColor = "#dcdcdc";
            x[2].style.backgroundColor = "#dcdcdc";
            x[3].style.backgroundColor = "#dcdcdc";
            x = document.getElementById("t3").getElementsByTagName("td");
            x[0].style.backgroundColor = "#dcdcdc";
            x[1].style.backgroundColor = "#dcdcdc";
            x[2].style.backgroundColor = "#dcdcdc";
            x = document.getElementById("t4").getElementsByTagName("td");
            x[0].style.backgroundColor = "#dcdcdc";
            x[1].style.backgroundColor = "#dcdcdc";
            x[2].style.backgroundColor = "#dcdcdc";
            x[3].style.backgroundColor = "#dcdcdc";
            x[4].style.backgroundColor = "#dcdcdc";
            x[5].style.backgroundColor = "#dcdcdc";
            //document.getElementById("forcastCont").innerHTML;


            KML_def.setMap(null);
            for (var i = 1; i < 15; i++) {
                if (i == LNo) {
                    KML[i].setMap(map);
                    cell.style.backgroundColor = "#F0E68C";
                }
                else {
                    KML[i].setMap(null);
                }
            }
        }

I suspect that it has something to do with the timing of the code but I'm not sure. All of my Google searches turned up maps that wouldn't load initially but would upon refresh. I'm experiencing the exact opposite. Any help would be greatly appreciated! I hope I gave enough details, I'm a beginner programmer. Thanks.

Answer 1

check your network waterfall in the F12 tools and see if you are actually requesting the data or this some sort of 404 thing would be my first thing. You may have the data cache in the browser or something like that. If the network tab does not help determing that use Fiddler to see the raw request.

Errors would not show up in the debugger, but the console ;)

I would then set some breakpoints are key locations and watch the variables and step through the code to see what happens.

Hope this helps get you in the right direction.

Answer 2

I found out what was going on in Internet Explorer. I had suspicions that the functions and tasks were executing out of order but I didn't quite know where to look for it. Eventually I added a listener to the Google map. The listener fires up when the map goes idle, or in other words it is completely finished loading. Added this to line 104.

google.maps.event.addListenerOnce(map, 'idle', function(){
      getForecast();
});

This way the rest of the script waits for the map to finish loading. Worked like a charm! Thanks for the tips guys. Im still not sure why this worked in Chrome and Firefox but not in IE...