Search code examples
javascriptgoogle-maps-api-3drupal-7

How can I access the 'marker' object inside a google.map object?


I'm using google map in Drupal (but i don't think this is relevant to my problem). On a view (a page display in Drupal), i'm displaying markers on a Google Map. I'm displaying in a external block the links of the markers on the map.

i've looked at this example, but what i nedd is the other way around : I want, when i click on a map marker, i want to display (or emphasise) the related link (and extra data).

(function ($) {
    Drupal.behaviors.gmap = {
        attach: function (context, settings) {
            //'auto1map' is the name of my map
            $.each(Drupal.settings.gmap.auto1map.markers, function(index, mymarker){
                console.log(mymarker);

                //using 'mymarker' doesn't trigger the mouseover
                //I need the 'mymarker.marker' marker-object instead
                var marker = ???; 

                //I want to do something like this
                google.maps.event.addListener(marker, 'click', function(e){
                    console.log(index+' finally clicked');
                });
                // ...the rest of my code
            });
        }
    }
})(jQuery);

a mymarker object is like this in the Chrome console :

Object {text: "mytext", latitude: "46.3611897222", longitude: "1.60658955574", title: "Title of mymarker", markername: "mymarkername"…}
"": "mytext"
   latitude: "46.3611897222"
   longitude: "1.60658955574"
|> marker: Vl
   markername: "mymarkername"
   offset: ""
|> opts: Object
   text: "mytext"
   title: "Title of mymarker"

PS : The |> stands for a triangle expandable icon

I need to target that marker object, not the mymarker object

the marker part contains :

marker: Vl
|> Be: Object
|> __e3_: Object
|> __gm: Mf
|> anchorPoint: T
|> changed: function (a){a in e&&(delete this[Gc],d.k[Ee(this)]=this,hP(d))}
   clickable: true
   closure_uid_887014485: 9
|> gm_accessors_: Object
|> gm_bindings_: Object
|> icon: om.MarkerImage
|> map: Sl
|> position: R
   shadow: null
   title: "Title of mymarker"
   visible: true

If i try mymarker.latitude, i get the latitude value

If i try $(mymarker).opts, i get the 'opts' object

But what i need is to get the 'marker' part, but i can't get it : I tried

console.log(mymarker.marker) => undefined

console.log($(mymarker).marker) => the $(mymarker) objet

console.log($(mymarker).get('marker)) => undefined

I don't know what is and how to cast to 'Vl', which seems to be the type of the marker object ("marker" type ?). I tried the api guide I couldn't find help anywhere on how to access this data,

Edit - I edited my js code to show what i need.

Edit - Thanks to @Dr.Molle, and AlexK i managed to achieve my goal.

This is the updated version : I have a Drupal view displaying the google map with markers, and i also have an "attachment" displaying the same markers in a html list, in a different block. when i click on a marker i want to show the corresponding list element (and hide the others).

(function ($) { 
  //When click on marker, act on related link
  Drupal.behaviors.gmap = {
    attach: function (context, settings) {
      //I get all the html list elements 
      var li = $('.view-content .views-field-title').parent();
      //and hide them all
      li.hide();

      //Set index to associate list element and markers
      var index = 0;
      var lastindex = -1;

      //reference for the map
      var map=Drupal.gmap.getMap('auto1map');
      //bind addmarker-handler, the marker is available as callback-argument 
      map.bind('addmarker', function (m) {
        var element = $(li)[index];
        m.marker.index=index;

        //remove listeners set automatically by the library  
        google.maps.event.clearListeners(m.marker, 'click');

        //add  your custom listener
        google.maps.event.addListener(m.marker, 'click',function(){
          //Hide last shown element
          if (lastindex != -1){
            $($(li)[lastindex]).hide();
          }
          //Show the html element corresponding to the marker
          $(element).show();
          //Set new lastindex
          lastindex = parseInt(m.marker.index);
        });

        index++;
      });
    }
  };
})(jQuery);

Solution

  • I'm not familiar with drupal and this plugin, but as it seems the issue is not how to access the markers, the question is when to access the markers(google.maps.Marker-instances).

    Scalar values like latitude and longitude are already available via the settings when the function runs, but the google.map.Markers will be created later.

    You see the markers when you expand the console, but what you see there will be the state of the object when you expand the object, not the state of the object when you call console.log

    Possible solution: add a addmarker-listener to the map(will be executed when a marker will be added to the map) where you assign your custom click-listener:

    (function ($) {
        Drupal.behaviors.gmap = {
            attach: function (context, settings) {
              //reference for the map
              var map=Drupal.gmap.getMap('auto1map');
    
              //bind addmarker-handler, the marker is available as callback-argument  
              map.bind('addmarker', function (m) {
                //remove listeners set automatically by the library  
                google.maps.event.clearListeners(m.marker, 'click');
                //add  your custom listener
                google.maps.event.addListener(m.marker, 'click',function(){
                  alert('This marker is placed \n@'+this.getPosition().toString());
                });
              });
            }
        }
    })(jQuery);
    

    Strangely it's possible to set-up different kind of click-behaviours via the settings(e.g. infoWindow-creation and ajax-callbacks), but I didn't find a option to define a simple callback-function.