user2917487 user2917487 - 3 months ago 30
Javascript Question

Google Maps API won't load upon refresh in Internet Explorer 9

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

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...

Comments