Question

I have a list of JSON objects that I loop through and then (using the jQuery Gmap plugin found here) create markers for that object and add it to the map.

Problem is that in each browser I’m getting callstack overflow messages:

Uncaught RangeError: Maximum call stack size exceede

in Chrome, and

Too much recursion

in Firefox.

I have NO idea why or how to fix it.

This is my code:

$('#map_canvas').gmap().bind('init', function (evt, map) {
        var webMethod = '<%= NavigationHelper.GetFullUrl("Components/Services/storelocatorservice.asmx/GetStoresByAddress") %>';
        var webParam = '{ "address": "Vaartkom 31/9 3000 Leuven", "language": "<%= Sitecore.Context.Language.CultureInfo.TwoLetterISOLanguageName %>", "radius": "15" }';

        $.ajax({
            type: "POST",
            url: webMethod,
            data: webParam,
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function (msg) {
                //$('#map_canvas').gmap('set', 'MarkerClusterer', new MarkerClusterer(map));
                addMarkers($.parseJSON(msg.d));
            }
        });
});

function addMarkers(json) {
        $.each(json, function (i, m) {
            $('#map_canvas').gmap('addMarker', {
                'title': m.Name,
                'position': new google.maps.LatLng(m.Lat, m.Long),
                'name': m.Name,
                'zipcode': m.ZipCode,
                'id': m.LocationId,
                'bounds': true
            }).click(function () {
                $('#map_canvas').gmap('openInfoWindow', {
                    'content': '<h3>' + m.Name + '</h3><p>' + m.ZipCode + '</p><a onclick="getDirections(\'' + m.Id + '\')">Route</a>'
                }, this);
            });
        });
}

Any help is greatly appreciated!

Answer 1

I have found a fix, not that it fixes the bug itself it just prevents it from happening:
I have to set the bounds: false when adding a marker and then it won’t overflow the callstack.