Google map with asp.net and Markers loaded dynamically are not working on IE

I have this custom google map, with dynamic markers read from SQL server,

it works fine on chrome

, but when using IE, it gives me an error with this file https://maps.gstatic.com/intl/en_us/mapfiles/api-3/15/8/main.js

the error is in main.js, line 25 character 911,, Out of stack space ....

Also I am using the google map marker cluster.

here is a link to the site with the issue http://aprilit.com/gmap/default.aspx

I am stuck and don't know what to do, please HELP..

here is my js file that calls json and list the markers on the map

var map;

function LoadMap(arrMarkers) {

var mapOptions = {
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    streetViewControl: false
}

var MarkerShadow = new google.maps.MarkerImage('img/assets/markershadow.png',
      new google.maps.Size(51.0, 37.0),
    new google.maps.Point(0, 0),
    new google.maps.Point(16.0, 18.0));

var MarkerShape = {
    coord: 

[20, 0, 21, 1, 22, 2, 23, 3, 24, 4, 24, 5, 25, 6, 25, 7, 25, 8, 25, 9,25, 10, 25, 11, 25, 12, 25, 13, 25, 14, 24, 15, 23,16, 23, 17, 22, 18, 20, 19, 21, 20, 24, 21, 27, 22, 29, 23, 30, 24,30, 25, 30, 26, 29, 27, 29, 28, 27, 29, 24, 30, 21, 31, 13, 31, 12, 30, 12, 29, 12, 28, 11, 27, 11, 26, 11, 25, 11, 24, 11, 23, 12, 22,12, 21, 11, 20, 10, 19, 9, 18, 8, 17, 7, 16, 6, 15, 6, 14, 5, 13, 5, 12, 5, 11, 5, 10, 5, 9, 5, 8, 5, 7, 5, 6, 6, 5, 6, 4, 7, 3, 8, 2, 9,1, 11, 0, 20, 0], type: 'poly' };

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,
            shadow: MarkerShadow,
            shape: MarkerShape,
            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 style="font-family:tahoma;font-size:10pt;height:30px;"><img

src="img/assets/loader.gif"/> Loading..');

            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'] }), //{conType:"'"

+ContentType+ "'",conID:"'" + ContentID + "'"}, // dataType: "json", success: function (msg) {

                     infowindow.setContent(formatInfoDivHTML(msg.d));
                 }
             });

            map.panTo(this.getPosition());
            infowindow.open(map, this);
        });

        bounds.extend(myLatLng);
        tempCount++;
    }
}
map.fitBounds(bounds);

var mcOptions = { gridSize: 50, maxZoom: 12 };

var markerCluster = new MarkerClusterer(map, markers, mcOptions);

google.maps.event.trigger(map, 'resize'); } function LoadIcon(MarkerImage) {

var ImagePath = "Images/Categories/" + MarkerImage;

var image = new google.maps.MarkerImage(ImagePath,
         new google.maps.Size(32.0, 37.0),
        new google.maps.Point(0, 0),
          new google.maps.Point(16.0, 18.0));
return image; }

function formatInfoDivHTML(xmlMarker) {

var Marker = $.parseXML(xmlMarker);

var ImagePath = "Images/Marker/" + $(Marker).find('mimg')[0].innerHTML;

var URL = "ViewMarker.aspx?id=" + $(Marker).find('mid')[0].innerHTML; ;

var html = "<div style='font-family:tahoma;font-size:10pt;'>";

html +=  "<img style='width:100px;height:100px;margin:1px 6px 0 0;border:1px solid #ccc;float:left;padding:1px;' src='" + ImagePath +

"' />";

html += "<strong style='font-size:12pt;'>" + $(Marker).find('t')[0].innerHTML + "</strong><br/><br/>";

html += "<p style='margin-left:6px;'>" + $(Marker).find('intr')[0].innerHTML + "</p><br/>";

html += "<a href='" + URL + "'> View Details</a><br/>";

html += "</div>";

return html; }

function LoadMarkers(CatID) {

   $.ajax({
                 type: "POST",
                 contentType: "application/json; charset=utf-8",
                 url: "Markers.asmx/GetMarker",
                 data: JSON.stringify({ MarkerID: -1, CategoryID: CatID }), 
                 dataType: "json",
                 success: function (msg) {
                     if (msg.d != "")
                         LoadMap(SplitXML(msg.d));
                     else
                         alert("No Markers related to this category!");
                     }
       });   }



function SplitXML(xmlstring) {

xmlstring = xmlstring.replace(/<Markers>/g, "");

xmlstring = xmlstring.replace(/<\/Markers>/g, "");

xmlstring = xmlstring.replace(/<\/Marker>/g, "#");

var xmlMarkers = xmlstring.split('#');

var markersXMLArr = [];

var xmlCollection = "<Markers>";

var j = 1;

for (var i = 0; i < xmlMarkers.length; i++) {
    if (xmlMarkers[i] != '') {

    xmlCollection += xmlMarkers[i] + '</Marker>';

    }

    if (j < 5 && i != xmlMarkers.length - 1) {
     j++;
        }
    else {

        markersXMLArr[parseInt(i / 5)] = xmlCollection + "</Markers>";

        j = 1;

        xmlCollection = "<Markers>";
    }

}

 return markersXMLArr;

}

The Call for the map will be like this

LoadMarkers(-1);

thanks

Answers


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


Need Your Help

Select individual unique dialog for each option chosen

jquery html css html-select custom-data-attribute

I am trying to create a unique confirmation dialog that appears for each option selected. However currently I have it set so that the dialog will only appear if the option selected is less than the

Get result of search of website, without actually "opening" the site

search web show

I'd like to code a website where you can find search results from many websites.