Google Map API3 Map.fitBounds is not working on IE

Question

I am using webservice to load markers from sql server. and a cluster-er to group those markers, then I re-size the map to fit the bounds using map.fitBounds(bounds).. it works fine on chrome and firefox,, BUT not working on IE,, it gives me an error of Out of stack space in one of google map api 3 files (main.js)

you can check this demo for the issue : http://aprilit.com/gmap/default.aspx here is a part of my code.

function LoadMap(arrMarkers) {

 var mapOptions = { mapTypeId: google.maps.MapTypeId.ROADMAP, streetViewControl: false } var map = new google.maps.Map(document.getElementById('map'), mapOptions); var markers = []; var tempCount = 0; var bounds = new google.maps.LatLngBounds(); for (var XMLCount = 0; XMLCount < arrMarkers.length; XMLCount++) { var Points = $.parseXML(arrMarkers[XMLCount]); $Markers = $(Points).find("Marker"); for (var i = 0; i < $Markers.length; i++) { var tempID = $Markers.find('mid')[i].innerHTML; var tempCID = $Markers.find('cid')[i].innerHTML; var myLatLng = 

new google.maps.LatLng($Markers.find('lt')[i].innerHTML,

$Markers.find('lg')[i].innerHTML);

markers.push(new google.maps.Marker({

  position: myLatLng, map: map, animation: google.maps.Animation.DROP, markerid: $Markers.find('mid')[i].innerHTML, catid: $Markers.find('cid')[i].innerHTML, icon: LoadIcon($Markers.find('cimg')[i].innerHTML) })); infowindow = new google.maps.InfoWindow({ content: "loading..." }); google.maps.event.addListener(markers[tempCount], 'click', function () { infowindow.setContent('<div ><img src="img/assets/loader.gif"/> Loading../div>'); infowindow.open(map, this); $.ajax( { type: "POST", contentType: "application/json; charset=utf-8", url: "Markers.asmx/GetMarker", data: JSON.stringify({ MarkerID: this['markerid'], CategoryID: this['catid'] }), dataType: "json", success: function (msg) { infowindow.setContent(formatInfoDivHTML(msg.d)); } }); map.panTo(this.getPosition()); infowindow.open(map, this); }); bounds.extend(myLatLng); tempCount++; } } //////////////////////////Here is the problem map.fitBounds(bounds); var mcOptions = { gridSize: 50, maxZoom: 12 }; var markerCluster = new MarkerClusterer(map, markers, mcOptions); google.maps.event.trigger(map, 'resize'); } 

thanks and ill appreciate your help

also note that I am using fitbounds in other places and it is working just fine.

Just for the reference,, when I checked with an older version of google chrome (Version 31.0.1650.57 m) it gave me the same error..but when I updated chrome the issue has gone

Answer 1

Your SplitXML function is appending an extra null element to the array of markers. Most versions of IE don't like that.

Answer 2

I solved this issue,,

It appears that IE doesn't support the innerHTML property I used here:

$Markers.find('mid')[i].innerHTML

or any where else where I am retrieving the data from my xml fields.

so it had to be replaced with the the textContent property as this:

$Markers.find('mid')[i].textContent;

and that solves the whole issue.!!

thanks for your help guys