I am currently trying to make my map so that on a Cluster mouseover, a toolbox/infobox/anything will show up beside the cursor. I am getting no console errors, and ran the JS through a validator to find no issues. For some reason, it won't fire at all, but I think it may be because I don't know how these Maps actually work, moreso than an issue with the module.

There is practically no documentation on how to actually use Clusterers with this module, in terms of actual JS coding.

Drupal.behaviors.gmap = {
        attach: function(context, settings) {
            //reference for the map
            var map = Drupal.gmap.getMap('auto1map');
           //try to reference the MarkerClusterer (this is where it breaks)
            var markerClusterer = new MarkerClusterer(map, markers, options);
};

Gives the error

InvalidValueError: setMap: not an instance of Map; and not an instance of StreetViewPanorama
_.rb @ js?v=3&language=en&sensor=false&libraries=geometry&key=AIzaSyCfVt-7CovA6k9_LEErxHPWP3RW9eYf8Ys:35
_.oc @ js?v=3&language=en&sensor=false&libraries=geometry&key=AIzaSyCfVt-7CovA6k9_LEErxHPWP3RW9eYf8Ys:45
(anonymous) @ js?v=3&language=en&sensor=false&libraries=geometry&key=AIzaSyCfVt-7CovA6k9_LEErxHPWP3RW9eYf8Ys:56
MarkerClusterer @ markerclusterer.js?otrc0g:717
attach @ google-map-template:7423
(anonymous) @ drupal.js?otrc0g:76
each @ jquery-1.7.2.min.js:2
Drupal.attachBehaviors @ drupal.js?otrc0g:74
(anonymous) @ drupal.js?otrc0g:504
o @ jquery-1.7.2.min.js:2
fireWith @ jquery-1.7.2.min.js:2
ready @ jquery-1.7.2.min.js:2
B @ jquery-1.7.2.min.js:2

Am I doing something wrong? Should I be selecting the map using the normal google.maps.Map code?

I have searched high and low and cannot find a relevant issue.

Comments

schnoodle created an issue. See original summary.

schnoodle’s picture

Additionally,

google.maps.event.addListenerOnce(map, 'tilesloaded', function(){ console.log("Am I Alive"); });

Doesn't fire at all.

schnoodle’s picture

I found the issue. This module doesn't have MarkerClusterer/MarkerClustererPlus built in very well, as it doesn't make it easy to use the vanilla syntax nor is the functionality fully expanded upon.

I found in gmap/js/markerclusterer_marker.js that alluded to using obj.mc in order to call MarkerClusterer. If you're using plus, like me, you can still use some of the extra functions it gives you. It's incredibly finicky, and generally you will want to put it in both .load() AND setTimeout() functions to make sure it doesn't try to initialize before the map is fully created. The last point fixes a lot of the problems, for whatever reason.

My code ended up having this after the map declaration:

$(window).on("load", function(){
                  setTimeout(function(){google.maps.event.addListener(map.mc, 'mouseover', function(c) {
                    $(".clusterList").empty();
                    var m = c.getMarkers();
                    var p = [];
                    for (var j = 0; j < m.length; j++ ){
                      p.push(m[j]);
                      if($.inArray(m[j], markers)){
                        var t = markers.indexOf(m[j]);
                        var modal = $($(li)[t]).find('a').attr("href");
                        var pdf = $(modal).find(".profile-pdf").attr("href");
                        var text = $(modal).find(".modal-title").text();
                        if($(modal).find(".profile-pdf").attr("href") != ""){
                          $(".clusterList").append("<li><a class='pdf truncate' href='"+pdf+"'>" + text + "</a></li>");
                        } else {
                          $(".clusterList").append("<li><div class='no-pdf truncate'>" + text + "<span class='tooltiptext'>No PDF Available!</span></div></li>");
                        }
                      }
                    }
                  });}, 2000);

Which initializes on mouseover, where it grabs markers inside of a cluster using .getMarkers(). The rest is just my custom work, which finds attributes to dynamically add PDF links into a list. The whole thing was that all this information had to be dynamic, so it was pretty interesting finding a way that works optimally and can grab a lot of data at once.

schnoodle’s picture

Title: new MarkerClusterer, setMap: not an instance of Map; using map = Drupal.gmap.getMap » Referencing MarkerClusterer must be done after both on.load and .setTimeout to add listeners

Changed the title, as I believe the root to all the problems, besides lack of documentation, is that in order to establish listeners to MarkerClusterers, you must wait until the page is loaded and then some to get said listener to work properly, or else you get the error

Uncaught TypeError: Cannot read property '_e3' of undefined

Meaning, an attempt to set event listeners on nonexistent DOM elements.

If I was smart enough I would dig in and try to patch it, but I don't feel comfortable with my knowledge in that area.