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