2

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);
Overdose
  • 585
  • 7
  • 30

1 Answers1

0

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.

Dr.Molle
  • 116,463
  • 16
  • 195
  • 201
  • This is absolutely brilliant, spot on : this was indeed a probleme of use of the right listener ! Maybe it's off topic, but if you don't know Drupal, how could you possibly know (not guess, i have to much respect for you right now :D ) that the problem was about the addmarker listener, and more important : i could NOT access the marker object BUT in the console it was AVAILABLE, with all the right values. How would you correlate these two facts, and your genius idea to use the addlistener. I'm willing to learn how to debug this kind of headache problem. Thanks anyways. – Overdose Sep 01 '14 at 17:57
  • I've used this simple drupal-page with a map and a marker: http://www.drupal.manuals-now.com/map/node and added your code to see what's happening there. It was clear that it's a timing-issue when the marker was visible as a property of another object, but undefined when I tried to access it directly([related question to the console-behaviour](http://stackoverflow.com/questions/18098482/javascript-object-property-logged-in-google-chrome-console-before-declaration/18098661#18098661)). The addmarker-listener I've found by inspecting the loaded scripts for the page( GIcon manager ) – Dr.Molle Sep 01 '14 at 18:19
  • Thank you for the extra explanation ! I just regret i don't have enough "credits" here to +1 you. I didn't see where your last sentence refers to but i will inspect that tomorrow morning. – Overdose Sep 01 '14 at 18:28
  • It has been this file: http://www.drupal.manuals-now.com/sites/default/files/js/js_SL9MhcVfq3IIxY_AchTGbNe2HkcpdN7CUi1RcUfMZ30.js – Dr.Molle Sep 01 '14 at 18:34
  • ok, so you inspected the code of those files ONE BY ONE with an editor ? You didn't find the listener using the inspector and finding the "addmarker" buried in the methods/prototypes ? That's what i'm trying to understand. Maybe there's a ressource to understand how to dig in those inspectors (Chrome, FF...) to find this kind of information. Or maybe if you sayy otherwise, i just have to scroll all js files to find the answer. Anyway, thank you again for your time. – Overdose Sep 02 '14 at 09:19
  • Yes, I inspected the source of each JS-file(from that domain) in firebug(network-tab). It wasn't hard to find the right file because they are not compressed and include a description of their purpose at the beginning. Unfortunately I didn't find a documentation for the scripts, of course it would have been easier then. – Dr.Molle Sep 02 '14 at 09:56
  • OK, then. Too bad these awesome console tools are not (yet ?) able to provide that help :D – Overdose Sep 02 '14 at 10:08