Replacing a Gmap marker via a different div in Drupal

Question

I have already killed countless hours trying to make this work, without any success.

I'm writing a custom module in Drupal 7

Basically what I'm trying to achieve is the Airbnb-like effect, where I have a map on one side of the site, a list of items on the other, and when I hover an item in the list, the corresponding marker on the map is getting highlighted by changing its icon (I'm using custom icons, so the marker's icon needs to change from blue.png to pink.png)

I generate the map and the markers in a custom module using the functionality of the Gmap module.

a marker looks like:

$markers[] = array(
        'key'=> 'key' . $n,
        'text' => l($node->title, 'node/' . $node->nid), $node->entity_id,
        'longitude' => $node->longitude,
        'latitude' => $node->latitude,
        'markername' => 'custom blue',
                            );

What I want to do is to have a Javascript (preferrably jQuery) where a mouseover on a #block-$n div would trigger the marker with a key$n to change its icon from blue to pink.

Can someone help me out, please? many thanks, Zsolt

I think the marker object has a setIcon('pink.png') function. Did you try it? — 2pha
Actually I think I failed to find a way to access the marker object. How do you do that? thanks — Zsolt Balla

Zsolt Balla Zsolt Balla · Accepted Answer · 2015-01-19T10:58:25

Okay, a few more hours later I managed to find a solution:

this comment is what I used, and in my live code it looks like:

(function ($) {
  Drupal.behaviors.gmap = {
    attach: function (context, settings) {
      $(document).ready(function(){
        $('.rooms-search-result__unit-embedded').each(function(i){
        
          $(this).bind('mouseover', function(){
            google.maps.event.trigger(
              Drupal.settings.gmap.auto1map.markers[i].marker.setIcon("http://url.com/sites/all/modules/gmap/markers/pink.png") 
              
            );
            return false;
          });
          
          $(this).bind('mouseout', function(){
            google.maps.event.trigger(
              Drupal.settings.gmap.auto1map.markers[i].marker.setIcon("http://url.com/sites/all/modules/gmap/markers/blue.png") 
              
            );
            return false;
          });
          
          
        });
      });
    }
  };
})(jQuery);

Another issue I had to tackle was that apparently the markers weren't displayed in the same order as text results (so the mouseover did not highlight the corresponding marker but another one), but adding an Order By to the sql seemed to have solved that, too.

Thanks for the help, bests, Zsolt

Replacing a Gmap marker via a different div in Drupal

1 Answers