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);