CODEWITHSUNDEEP
javascriptjquerygoogle-maps
wycleffsean
wycleffsean

Reputation: 1377

Adding Event Listener causes Google Map to freeze

I am attempting to create a google map with markers on my page. I have an unordered list where each item has data attributes for latitude, longitude and title. Using JQuery I pull these values and produce a marker on the map for each item in the list. Everything seems to work OK except google maps will not load tiles as you pan around the map.

google map tiles not loading

This is how I initialize the map:

var map;
// initialize google map
$(function () {
    var myOptions = {
        zoom: 10,
        center: new google.maps.LatLng(CoordinatesLat, CoordinatesLong),
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        mapTypeControl: false
    }
    // initiate map
    map = new google.maps.Map($("#map")[0], myOptions);

    // when map is loaded, add events and behaviors to it
    google.maps.event.addListenerOnce(map, 'tilesloaded', addEventsToMap(".event")); //commenting this line prevents GMAP problems
});

FYI - before I was using maps.event.addListener() and the map would work momentarily and then become completely unresponsive. Changing it to maps.event.addListenerOnce() stopped the freezing but still has the tile loading problem.

And this is the callback, where evidently I've done something wrong:

//add events from event list to map.  add behavior to events ie. mouseover
function addEventsToMap(selector) {
    $(selector).each(function (i, $e) {
        $e = $($e);
        var latlng;
        if ($e.attr("data-geo-lat") && $e.attr("data-geo-long")) {
            latlng = new google.maps.LatLng($e.attr("data-geo-lat"), $e.attr("data-geo-long"));

            $e.marker = new google.maps.Marker({
                position: latlng,
                map: map,
                title: $e.attr("data-title")
            });

            google.maps.event.addListener($e.marker, 'click', function () { window.location = $e.attr("data-href"); });
            google.maps.event.addListener($e.marker, 'mouseover', function () { $e.addClass("event-hover"); });
            google.maps.event.addListener($e.marker, 'mouseout', function () { $e.removeClass("event-hover"); });

            //when mouse hovers over item in list, center map on it's marker
            $e.mouseenter(function () {
                map.panTo(latlng);
            });
        }
    });
}

Any idea what could be causing this?

Upvotes: 0

Views: 1523

Answers (1)

loganfsmyth
loganfsmyth

Reputation: 161677

I see a problem, though I'm not sure if it's the issue here. If you examine this line:

google.maps.event.addListenerOnce(map, 'tilesloaded', addEventsToMap(".event"));

What you are intending to do is call your 'addEventsToMap' once the map is loaded, but instead what you are doing is calling the function and then assigning the return value of that as a listener.

You need this instead, and I think it shouldn't crash anymore.

google.maps.event.addListenerOnce(map, 'tilesloaded', function() {
  addEventsToMap(".event");
});

If that doesn't work, I would recommend looking at the Javascript Console of whatever browser you are using, to see what error is happening to make the map crash.

Upvotes: 1

Related Questions