Discussion :

[lolalilo]

Bonjour,
Je cherche à réaliser un petit menu qui me permette d'ouvrir l'infowindows d'un marker.
Je vois bien que c'est possible
(voir exemple : http://gmaps-samples-v3.googlecode.c...m-markers.html )
Mais la methode me semble bien obscure, et je ne comprend pas vraiment ce qui se passe ici.

j'utilise pour ma part le code suivant pour afficher ma carte

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
 
google.maps.event.addDomListener(window, 'load', function() {
    var map = new google.maps.Map(document.getElementById('map'), {
      zoom: 13,
      center: new google.maps.LatLng(37.789879, -122.390442),
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });
 
    var infoWindow = new google.maps.InfoWindow;
 
    var onMarkerClick = function() {
      var marker = this;
      var latLng = marker.getPosition();
	  var content = marker.name;
	  var website= marker.website;
	  infoWindow.setContent(content+'<br />'+website);
 
      infoWindow.open(map, marker);
    };
    google.maps.event.addListener(map, 'click', function() {
      infoWindow.close();
    });
 
    var marker1 = new google.maps.Marker({
      map: map,
      position: new google.maps.LatLng(37.789879, -122.390442),
	  name: 'hello1',
	  website: '<a href="http://www.lolalilo.com">www.lolalilo.com</a>',
    });
    var marker2 = new google.maps.Marker({
      map: map,
      position: new google.maps.LatLng(37.787814,-122.40764),
	  name: 'hello2',
	  website: '<a href="http://www.lolalilo.com">www.lolalilo.com</a>',
    });
    var marker3 = new google.maps.Marker({
      map: map,
      position: new google.maps.LatLng(37.767568,-122.391665),
	  name: 'hello3',
	  website: '<a href="http://www.lolalilo.com">www.lolalilo.com</a>',
    });
 
    google.maps.event.addListener(marker1, 'click', onMarkerClick);
    google.maps.event.addListener(marker2, 'click', onMarkerClick);
    google.maps.event.addListener(marker3, 'click', onMarkerClick);

Pourriez vous m'indiquez clairement comment réaliser la petite fonction qui d'activer l'ouverture d'une infobulle d'un de ces marker via un <a href="---" /> ...

merci

[NoSmoking]

Bonjour,
à chaque créations d'un marqueur il y a création d'un lien auquel on affecte sur le onclick une fonction d'affichage.

Cette fonction d'affichage peut être un fonction ou un transfert d'événement, ce qui est le cas dans l'exemple montré, via un google.maps.event.trigger( marker, 'click');

[lolalilo]

D'abord merci pour cette reponse qui m'eclaire un petit peu..

Si je comprend bien un trigger permet a un lien de href, d'executer la meme fonction que si je cliquais sur le marker..

Mais je ne comprend pas bien comment ca fonctionne,
j'ai essayer (assez betement) de rajouter ceci :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<a  onClick="javascript:google.maps.event.trigger(marker1, 'click');" href="#">marker 1</a>

et bien evidement ca ne marche pas...

Merci de m'eclairer plus encore...

[lolalilo]

Pour preciser mon ca marche pas, avec firebug, lorsque je clic sur se bouton, ca me renvoie 'marker1 is not defined'.
ce qui m'etonne puisque marker1 est bien definit préalablement :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
var marker1 = new google.maps.Marker({
				map: map,
				position: new google.maps.LatLng(52.5176, -1.8980),
				.....
				});

bref ca marche pas et je comprend pas

[NoSmoking]

attendu que la totalité de ton code est dans une closure, les variables déclarées à l'intérieur de celle ci ne sont pas visibles à l'extérieur.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
google.maps.event.addDomListener( window, 'load', function(){
  // les variables déclarées dans ce bloc ne sont visibles que dans ce bloc
});

comme ta variable marker1 est déclarée dans le bloc l'appel depuis un lien de la page est voué à l'échec

Pour remédier à cela tu peux soit

1. déclarer les variables en globale, ce qui reste moyen
2. affecter les événements onclick, sur tes liens à l'intérieur de la closure

Au passage

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

<a onClick="javascript:google.maps.event.trigger(marker1, 'click');" href="#">marker 1</a>

est incorrect, les événements attendant une action javascript, il est inutile de le préciser

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

<a onclick="google.maps.event.trigger(marker1, 'click');" href="#">marker 1</a>

[lolalilo]

Très bien , très bien...
Je comprend donc pourquoi ca ne marche pas,
exusez moi mais je ne comprend pas bien toutes les subtilités du javascript.
Et je ne suis vraiment pas habitué à celui-ci.

n'y a t'il as un moyen pour tout simplement la rendre visible de l'exterieure, cette variable ... (genre "public" ou "global" ..)

ou sinon, comment je fait pour declarer mon bouton a l'interieur de cette fonction et l'afficher dans une <div> à l'exterieur de la map??

[lolalilo]

Exusez moi, mais je commence a peter les plomb avec cette histoire de trigger..

Ca devrais etre simple, mais les exemples que je trouve sont soit super compliqué pour rien, parce qu'ils incluent des fonctions dont je n'ai pas besoin, soit incomplets avec des sous entendu pour les pros du javascript.

Bref, ne serais t'il pas plus simple d'exposer une bonne fois pour toute un code claire qui fasse cela, sans array, ni fonction random, (qui soit dit en passant ne sert pas a grand chose a part a embrouillé le code)
juste 2 ou 3 marker définit, et 2 ou 3 boutons qui ouvrent leur infobulle respective (toute en fermant la précedente) en realisant un trigger de l'evenement click sur un marker...

Ce que je demande c'est juste une explication claire et concise

Je remercie NoSmoking pour ces reponses, mais elles m'aide juste à comprendre pourquoi ce que j'essaie ne marche pas, et non pas comment faire pour que ca marche.

Merci de m'expliquer :
comment déclarer les variables en globale, ...
ou bien comment affecter les événements onclick, sur mes liens à l'intérieur de la closure

Je repete je ne suis vraiment habitué au javascript, je trouve ce langage vraiment tordu, et pas très clair.
Mais puisque c'est le seul moyen de faire fonctionner google map API ...

merci d'avance

[NoSmoking]

Bref, ne serais t'il pas plus simple d'exposer une bonne fois pour toute un code claire qui fasse cela, sans array, ni fonction random, (qui soit dit en passant ne sert pas a grand chose a part a embrouillé le code)

plus simple pour qui?? supprimes ce dont tu n'as pas besoin...mais les array sont un des piliers du langage et la fonction random n'est présente que pour générer des marqueurs...

Ce que je demande c'est juste une explication claire et concise

j'ai eu l'impression de l'être...

Merci de m'expliquer :
comment déclarer les variables en globale, ...

http://www.developpez.com/recherche/...ble-globale%2F
Comment créer une variable globale dans une fonction ?

ou bien comment affecter les événements onclick, sur mes liens à l'intérieur de la closure

pas sûr que mettre à ta disposition un code tout fait t'aideras bien, néanmoins il en existe plein sur ce forum que j'ai déjà soumis.

Je repete je ne suis vraiment habitué au javascript, je trouve ce langage vraiment tordu, et pas très clair.

ni plus ni moins qu'un autre, mais il est clair qu'il faut à minima acquérir les bases.

exemple:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
var mark1, mark2, mark3;  // variables globales
google.maps.event.addDomListener( window, 'load', function(){
  var compteur = 0;       // variable locale
  mark1 = new google.maps.Marker(...);
  mark2 = new google.maps.Marker(...);
  mark3 = new google.maps.Marker(...);
});