By stongo on

I can't get GEvent.addListener() to work for a gmap in a view (using gmap module) in Drupal 7. Has anyone been able to create a click event for a gmap generated by a view? Any help would be appreciated, I'm stumped

Here's test code from my JS file

(function ($) {
  Drupal.behaviors.example = {
    attach: function (context, settings) {
      var gmap = Drupal.gmap.getMap('auto1map');
      GEvent.addListener(gmap, 'click', function() {
        alert('help');
      });
    }
  };

}(jQuery));

The alert doesn't get fired. Also tried adding a marker which also didn't work.

⋅ Categories: Drupal 7.x

Comments

stongo’s picture

stongo commented

ready() was the key, but in Drupal 7, it must be written:

jQuery(document).ready();

This at least makes Drupal.gmap.getMap('mapname') return as an object in console.log, and I placed it in the footer to make sure it would be executed last, but I am still unable to make a click event work.

<?php
function gmaps_custom_preprocess_page(&$variables) {
  $script = "jQuery(document).ready(function () {
      var gmap = Drupal.gmap.getMap('auto1map');
      GEvent.addListener(gmap, 'click',function() {
        alert('help');
      });
    });";
  drupal_add_js($script, array('type' => 'inline', 'scope' => 'footer'));

Not sure where to go from here...

m.abdulqader’s picture

m.abdulqader commented

but I try to bind the new behavior
My code is: 

jQuery(document).ready(function() {
	var map = Drupal.gmap.getMap('map-id');
    Drupal.gmap.addHandler('gmap', function() {	  
	  this.bind("move", function () {
	     //code
	  });
  });
});
m.abdulqader’s picture

m.abdulqader commented

Hello,
I was miss a lot of how to use JQuery in Drupal 7 and my problem solved now, I will share my solution to all.

(function($) {
  Drupal.behaviors.[BEHAVIOR-NAME] = {
    attach:function(context, settings){
	  Drupal.gmap.addHandler('gmap', function(elem) {
		var obj = this;  	
		obj.bind("init", function () {
		  var map = obj.map;
	          GEvent.addListener(map, 'click', function(overlay,point) {
		    // YOU CODE
		  });
		});	
	  });
    }
  }
})(jQuery);
intrafusion’s picture

intrafusion
Primary language English
Location Edinburgh, UK
commented

The behaviour has changed again!

This works for me:

Drupal.gmap.addHandler('gmap', function (elem) {
  var obj = this;

  obj.bind('init', function () {
    var map = obj.map;
    google.maps.event.addListener(map, 'click', function(overlay) {
      // CODE
    });
  });
});
nehajn’s picture

nehajn commented

Add extra events on gmap views for additional features.
Below code add onclick event on marker click and also focus the matched record on right side bar.
Example-: 

 (function($) {
  Drupal.behaviors.dependent_dropdown = {
    attach:function(context, settings){
	  Drupal.gmap.addHandler('gmap', function(elem) {
		var obj = this;
		obj.bind("init", function () {
		  var map = obj.map;

         obj.bind('addmarker', function (marker) {
         
         marker.opts.position = new google.maps.LatLng(marker.latitude, marker.longitude);
         marker.opts.map = obj.map;
         var m = Drupal.gmap.factory.marker(marker.opts);
       
         markersList = marker.opts.map.markers;  
     
         marker.marker = m;
         markerList = m.title;
         
         var divId = "record_"+m.title;    
         $( '#'+divId ).css( "border", "none" );  
        
        google.maps.event.addListener(m, 'click', function () {
        obj.change('clickmarker', -1, marker);      
        var activeId = "record_"+m.title;  // console.log("Active->"+activeId);  
        var nonActiveId ='' ;     
          $( '#'+activeId ).css( "border", "solid" );
          for (var i=0;i<markersList.length;i++)
             {  nonActiveId = "record_"+markersList[i].title;  
               if(markersList[i].title = m.title);
                 {  $('#'+activeId).addClass("active");
                  }
                 if(markersList[i].title != m.title);
                 { $('#'+nonActiveId).removeClass("active"); }
               }

             });
        
          });
        
      });

               

   });
    }
  }
})(jQuery);