I'm creating a directory with a gmap views and a list of name in the attachment. What I wanted is to hightlight the marker on the gmap views when you pass over the name.

Step 1 : Create a page view with all the filter you want
Step 2: Create the attach view to the page created.
Add the following script inside a javascript file and load it with the drupal_add_js() function or put it inside the page.tpl.php.

Drupal.behaviors.gmap = function (context) {
	$('a.MyOwnLink').each(function(i){
		$(this).bind('mouseover', function(){
			GEvent.trigger(Drupal.settings.gmap.auto1map.markers[i].marker, "mouseover");
			return false;
		});
		$(this).bind('mouseout', function(){
			GEvent.trigger(Drupal.settings.gmap.auto1map.markers[i].marker, "mouseout");
			return false;
		});
	});
}

a.MyOwnLink -> class name of the link use for the script
gmap.auto1map.markers -> name of my gmap map, use firebug to verify the name of yours, can be different.

Maybe this is not perfect but I haven't found something for helping me, so if it's can be usefull to someone. And sorry for my bad english.

CommentFileSizeAuthor
final.jpg633.2 KBkiero63
attachment_views.jpg254.41 KBkiero63
page_views.jpg218.66 KBkiero63

Comments

theodorosploumis’s picture

theodorosploumis
he/him
Location Greece
commented

Here is an equivalent for Drupal 7 with an extra option to click the marker by clicking the .views-row div.

(function ($) {
	Drupal.behaviors.gmap = {
        attach: function (context, settings) {
                // add actions in each views row. You can change that if you use other views format
		$('.view-content > .views-row').each(function(i){
			var newi = i-1; // marker[i] start from "0" but .views-row from "1"
                         
			$(this).bind('click', function(){ // click the marker by clicking the views row
			GEvent.trigger(Drupal.settings.gmap.locmap1.markers[newi].marker, 'click');
			return false;
			});

			$(this).bind('mouseover', function(){
			GEvent.trigger(Drupal.settings.gmap.locmap1.markers[newi].marker, 'mouseover');
			return false;
			});

			$(this).bind('mouseout', function(){
			GEvent.trigger(Drupal.settings.gmap.locmap1.markers[newi].marker, 'mouseout');
			return false;
			});
			
		});
	}
	};
})(jQuery);
sridarm’s picture

sridarm commented
Priority: Normal » Major

Can anyone suggest how to use the same coding for openlayers module. ?

podarok’s picture

podarok
🇺🇦 he/him/his
Primary language Ukrainian
Location Ukraine
commented
Version: 6.x-1.x-dev » 7.x-2.x-dev
Priority: Major » Normal

its normal, yeh
and this should be rerolled against latest dev

costas vassilakis’s picture

costas vassilakis commented

Hi Theodore
I am trying to use this script but I am resiving a JS Error: Uncaught ReferenceError: GEvent is not defined.

theodorosploumis’s picture

theodorosploumis
he/him
Location Greece
commented

@Costas_Vassilakis We cannot provide any help since we need access to the codes. It can be anything depending on Gmap version, module version etc.

tostinni’s picture

tostinni commented
Issue summary: View changes

Here is the updated code for Google maps v3

(function ($) {
	Drupal.behaviors.gmap = {
    attach: function (context, settings) {
                // add actions in each views row. You can change that if you use other views format
      $('.view-content > .views-row').each(function(i){
        $(this).bind('click', function() { // click the marker by clicking the views row
          google.maps.event.trigger(Drupal.settings.gmap.auto1map.markers[i].marker, 'click');
          return false;
        });
        $(this).bind('mouseover', function() {
          google.maps.event.trigger(Drupal.settings.gmap.auto1map.markers[i].marker, 'mouseover');
          return false;
        });
        $(this).bind('mouseout', function(){
          google.maps.event.trigger(Drupal.settings.gmap.auto1map.markers[i].marker, 'mouseout');
          return false;
        });
      });
    }
  };
  
})(jQuery);
harsh111’s picture

harsh111 commented

@tostinni thanx for the above code it helped me a lot thank so much

jos_s’s picture

jos_s commented

@tostinni This was exactly what I was looking for. Thanks for posting it here.

tostinni’s picture

tostinni commented

You're welcome.
Regarding the mouseover/mouseout, I don't use this part so I'm not sure how to implement the icon switch, if you have some additional informations, please share it ;).

jos_s’s picture

jos_s commented

I don't use the mouseover/mouseout either. I tried it, but it didn't work in my setup. As I do not need it, I did not look into this any further.

If by "icon switch" you mean that the map marker changes, I cannot help you now. If I ever find out, I will share it.

Goekmen’s picture

Goekmen commented

This helped me a lot especially #6!

I also wanted reverse the action: Click the marker and then for example give the views row a css class.
Sync both ways. Has someone an idea how to do it?

visabhishek’s picture

visabhishek commented

Thanks @tostinni. Its very helpful for me.

Anyone have any idea to Sync both ?