javascript - stack overflow with Google maps API (IE7 IE8)

Question

I've been fighting an issue with google maps on our site which occurs on first load on IE7 and IE8. I was trying to deal with the solution by combining firefox and ie8 debuggers, but it's quite difficult (and my boss is pushing me on other issues as well) as the JS is minified and IE debugger cant do a thing about it. We have two versions of the same site, one at irelandhotels.com and the dev environment at groupbke.young.netaffinity.net. First one has 500+ markers, the dev environment only 5 or so. However the issue occurs on both sites.

The execution will go into function yf, and then get into a loop with 3 unnamed functions.

I found an interesting article here about the issue: http://cappuccino.org/discuss/2010/03/01/internet-explorer-global-variables-and-stack-overflows/

Our maps initialization code is here: http://groupbke.young.netaffinity.net/bookings/googlemap

I have some images, just cannot post them so far, nor the link for them :/

Any help would be greatly appreciated.

Gergely

Answer 1

How I've always done this in the past is like this:

function initialize(mapid) {
    // make this local to your initialize function
    var hoteldata = [
        ['Griffen Hotel S1', 53.27093787103, -6.30448181406804, 'Lorem Ipsum', 1],
        ['Young Testing Hotel - Li?¨ge', 53.33932, -6.261427, 'Lorem Ipsum', 4]
    ];

    var myOptions = {
        zoom: 15,  // according to the documentation zoom and center are required when creating instances of the Map class
        center: new google.maps.LatLng(50.820645,-0.137376),
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        mapTypeControl: false
    };
    var bounds = new google.maps.LatLngBounds();
    var map = new google.maps.Map(document.getElementById(mapid), myOptions);
    var infowindow = new google.maps.InfoWindow();
    var markers = [];
    var i, latLng, img;

    for (i = 0; i < hoteldata.length; i++) {
        latLng = new google.maps.LatLng(hoteldata[i][1], hoteldata[i][2]);
        bounds.extend(latLng);

        // why not use a switch here?
        img = '/images/hotel-marker.png';
        if (hoteldata[i][4] == 2) {
            img = '/images/country-marker.png';
        }
        if (hoteldata[i][4] == 3) {
            img = '/images/guesthouse-marker.png';
        }
        if (hoteldata[i][4] == 4) {
            img = '/images/hotel-self-marker.png';
        }
        var marker = new google.maps.Marker({
        position: latLng,
        icon: img,
        shadow: '/images/marker-shadow.png'
        });
        markers.push(marker);

        bindInfoWindow(marker, map, infowindow, hoteldata[i][3]);
    }

    map.fitBounds(bounds);
}

function bindInfoWindow(marker, map, infowindow, html) { 
    google.maps.event.addListener(marker, 'click', function() { 
        infowindow.setContent(html); 
        infowindow.open(map, marker); 
    }); 
} 

Also, (although you say this isn't the problem) IE hates arrays or structures which end with a trailing comma.

var hoteldata = [
    ['Griffen Hotel S1', 53.27093787103, -6.30448181406804, '<div class="nearby-hotel"> <h1><a href="/hotels/ireland/dublin/dublin/griffen-hotel-s1">Griffen Hotel S1</a></h1> <div class="star-rating-0"></div><div class="clear"></div> <div class="nearby-hotel-image l"> <a href="/hotels/ireland/dublin/dublin/griffen-hotel-s1"><img src="http://groupbke.young.netaffinity.net/images/placeholder-60px.jpg" border="1" class="imagetype1"/></a> </a> </div> <div class="nearby-hotel-description l">  <a class="nearby-hotel-desc" href="/hotels/ireland/dublin/dublin/griffen-hotel-s1">Located in the heart of the city, this charming 100 executive Bedroom hotel is just a minute's walk from the main shopping and business districts.      Just step into the reception area and immediately you will know that you are somewhere very special. The beautiful reception area invites you to relax with the daily paper or a soothing drink whilst you contemplate your day.    With sumptuous executive hotel rooms and something for all the family, the Griffen Hotel undoubtedly earns its reputation as one of the cities finest.   </a> <a href="/hotels/ireland/dublin/dublin/griffen-hotel-s1" class="btn-small">Book Now</a> </div> <div class="clear"></div> </div>', ],
    ...
];

Remove that last , just before the first closing ] so it looks like:

var hoteldata = [
    ['Griffen Hotel S1', 53.27093787103, -6.30448181406804, '<div class="nearby-hotel"> <h1><a href="/hotels/ireland/dublin/dublin/griffen-hotel-s1">Griffen Hotel S1</a></h1> <div class="star-rating-0"></div><div class="clear"></div> <div class="nearby-hotel-image l"> <a href="/hotels/ireland/dublin/dublin/griffen-hotel-s1"><img src="http://groupbke.young.netaffinity.net/images/placeholder-60px.jpg" border="1" class="imagetype1"/></a> </a> </div> <div class="nearby-hotel-description l">  <a class="nearby-hotel-desc" href="/hotels/ireland/dublin/dublin/griffen-hotel-s1">Located in the heart of the city, this charming 100 executive Bedroom hotel is just a minute's walk from the main shopping and business districts.      Just step into the reception area and immediately you will know that you are somewhere very special. The beautiful reception area invites you to relax with the daily paper or a soothing drink whilst you contemplate your day.    With sumptuous executive hotel rooms and something for all the family, the Griffen Hotel undoubtedly earns its reputation as one of the cities finest.   </a> <a href="/hotels/ireland/dublin/dublin/griffen-hotel-s1" class="btn-small">Book Now</a> </div> <div class="clear"></div> </div>'],
    ...
];