bouton pour ouvrir open window

**lolalilo** · 12/01/2012, 15h41

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** · 12/01/2012, 19h05

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** · 16/01/2012, 17h13

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** · 16/01/2012, 17h30

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** · 16/01/2012, 22h09

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

déclarer les variables en globale, ce qui reste moyen
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** · 17/01/2012, 09h55

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** · 17/01/2012, 15h47

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** · 18/01/2012, 00h12

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

**lolalilo** · 18/01/2012, 12h11

plus simple pour qui?? supprimes ce dont tu n'as pas besoin...

J'ai bien essayé mais le code est si imbriqué qu'au final ma carte ne s'affiche plus.

mais les array sont un des piliers du langage et la fonction random n'est présente que pour générer des marqueurs...

Je sais bien que les array en programmation sont très important, ce que je voulais dire c'est que l'exemple que google s'appelle random, or l'utilité de ce code dans le cas de google map api me semble assez restreint. Je vois pas bien a qui ca pourra servir de placer de marker aléatoirement sur une carte du monde réèl. La plus part du temps, google map sert à indiquer de vrais pposition, pour des vrai lieux, sur une carte du vrais monde. Donc permettez moi de douter de la pertinence de cet exemple.

De plus les array c'est très bien quand c'est utile, mais alors coté lisibilité c'est vraiment pas top.
et excusez moi mais la difference dans ce cas précis, entre utilisé un array pour stocker tous mes marker, ou les definir chacun dans une variable, est assez limité.
Je veux bien utilisé un array quand cela est indispensable, mais de la a utiliser un array juste pour utiliser un array ...

Pou moi qui ne suis pas un expert en programmation, mais qui se depatouille avec un peu de PHP et d'AS3, le javascript me semble vraiment bizarre, et j'ai souvent entendu ca de la part d'autres programmeurs.

Par ailleurs ce matin j'ai enfin réussi a faire ce que je demandais depuis le depart à savoir :

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

ce qui personellement me permet de generer ce code en php à partir d'une BDD ...

alors parce que je ne suis pas havard, voilà la reponse :

à mettre dans le head

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
46
47
48
49
50
51
52
53
54
55
56
 
<script type="text/javascript">
  google.maps.event.addDomListener(window, 'load', function () {
 
	// definiition de la map														 
    var map = new google.maps.Map(document.getElementById('map'), {
      zoom: 2,
      center: new google.maps.LatLng(0, 0),
      mapTypeId: google.maps.MapTypeId.TERRAIN
    });
 
    var infoWindow = new google.maps.InfoWindow;
 
	// function d'ouverture de l'infowindows
    var onMarkerClick = function() {
      var marker = this;
 
	  var name = marker.name;
	  var website = marker.website;
	  var myContent = ['<h3>', name, '</h3>', website].join('');
	  infoWindow.setContent(myContent);
      infoWindow.open(map, marker);
    };
 
    google.maps.event.addListener(map, 'click', function() {
      infoWindow.close();
    });
 
	// definition des markers 
				/* marker1 */
				var marker1 = new google.maps.Marker({
				map: map,
				position: new google.maps.LatLng(52.5176, -1.8980),
				name: "Marker 1"
				});
				// écouteur evenement qui permet d'ouvrir l'infowindow du marker 1
				google.maps.event.addListener(marker1, 'click', onMarkerClick);
 
				/* marker2 */
				var marker2 = new google.maps.Marker({
				map: map,
				position: new google.maps.LatLng(53.3787, -1.4669),
				name: "Marker 2"
				});
				google.maps.event.addListener(marker2, 'click', onMarkerClick); 
 
	// fonction trigger sur les ecouteurs d'évemenents préalablement définit (ce que je cherchais depuis le debut !!!!)
	 document.getElementById('bt_marker1').onclick =function() { 
	 google.maps.event.trigger(marker1, 'click');
	 }
 
	 document.getElementById('bt_marker2').onclick =function() { 
	 google.maps.event.trigger(marker2, 'click');
	 }
	});
</script>

et dans le body

Code :

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

1
2
3
4
5
6
7
 
<body>
<div id="map"></div>
<!-- menu -->
<a id="bt_marker1" href="#">ouvrir marker 1</a>
<a id="bt_marker2" href="#">ouvrir marker 2</a>
</body>

voir mon exemple

Voilà pas besoin d'array donc, il suffisait de m'indiquer qu'ecrire des pseudo url dans un href n'est pas la bonne solution, (que l'on voit partout d'ailleurs)
voir ici

Ca m'aurait éviter bien des crises de nerfs ...

ps: certes tes indications m'ont mené sur la voie, notement concernant le trigger, mais pourquoi ne pas donné une réponse entiere dès le debut. J'aurais compris de la meme maniere ce qu'il fallait faire. Ca m'aurait juste pris moin de temps.

merci quand meme

**NoSmoking** · 22/01/2012, 11h44

Un programme bien pensé, et ce quelque soit le langage, est plus facilement maintenable. Si tu préfères, le jour où tu ajouteras des marqueurs, dupliquer les lignes de code, libre à toi, mais cela est source de débogage prise de tête et donc attention à la crise de nerf.

En règle générale il convient de commencer par lire la documentation, si disponible, de regarder les FAQ et les réponses fournies sur ce même forum, il est bien rare que la solution, où une approchante, ne s'y trouve pas.

Ce n'est pas parce que l'on trouve partout des codes et une certaine façon de coder que celles ci sont les plus clean, d'ailleurs cela reste très subjectif, même si il existe des bonnes pratiques JavaScript.
La façon de coder évolue en fonction de certaines "modes" et surtout de l'expérience du codeur.

Les exemples que l'on peut trouver ne fournissent que rarement LA SOLUTION mais sont plutôt une source d'inspiration et un guide à la résolution de problème, chaque cas étant particulier.

A la lecture de ton dernier message on se rend bien compte que tu voulais une solution clé en main, or nous sommes sur un forum d'entraide et comme son nom l'indique, celui ci n'est pas destiné à fournir du code prêt à l'emploi mais fournir des pistes de résolution de problème afin d'éviter de s'embourber, et le cas échéant d'aider à sortir de l'ornière dans laquelle on c'est mis. Cela permet donc également d'apprendre.
A te lire on voit que le but du forum est donc atteint et je te remercie de le signaler.

Il ne faut jamais oublier que les intervenants répondent sur leur temps libre et répondent suivant leur connaissance du sujet traité.

Quoiqu'il arrive si tu as d'autres soucis on sera toujours là pour essayer de t'aider à les résoudre.

Bonne continuation.

Bonus, cela aurait également pu donner ceci

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
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
<!DOCTYPE html>
<html lang="fr">
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>[Bouton d'ouverture d'infoWindow]</title>
<meta name="Author" content="NoSmoking">
<style type="text/css">
button {
  color : #00f;
  font-family : Verdana;
  font-size : 0.8em;
  text-align : left;
  cursor : pointer;
  border : 1px solid #c0c0c0;
  background-color : transparent;
  margin : 2px;
  padding : 1px;
}
#div_carte {
  width : 600px;
  height: 600px;
}
a {
  text-decoration: none;
  outline-style : none;
}
a img{
  border : 0;
}
</style>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
google.maps.event.addDomListener( window, 'load', function(){
  // définition des données
  var data =[
    {
      'btn'  : 'bt_marker1',
      'content' : '<h3>Marker #1<\/h3><a href="http://javascript.developpez.com/faq/javascript/" title="FAQ javascript" target="FAQ_1"><img src="http://javascript.developpez.com/faq/theme/images/mini_logo_faq_js.gif"<\/a><br>',
      'lat'  : 52.5176,
      'lng'  :  -1.8980
    },
    {
      'btn'  : 'bt_marker2',
      'content' : '<h3>Marker #2<\/h3><a href="http://javascript.developpez.com/faq/google-maps/" title="FAQ google-maps" target="FAQ_2"><img src="http://javascript.developpez.com/faq/theme/images/min_logo_faq_google_maps.gif"<\/a>',
      'lat'  : 53.3787,
      'lng'  : -1.4669
    }
  ];
 
  // creation de la map
  var oMap = new google.maps.Map( document.getElementById('div_carte'), {
    zoom : 6,
    center : new google.maps.LatLng( 52, 0),
    mapTypeId : google.maps.MapTypeId.TERRAIN
  });
  // une seule infoBulle
  var infoWindow = new google.maps.InfoWindow();
  // masque infoWindow sur clic map
  google.maps.event.addListener( oMap, 'click', function(){
    infoWindow.close();
  });
 
  // creation des markers
  var oMarker, oAction, i, nb = data.length;
  for( i=0; i < nb; i++){
    oAction = document.getElementById( data[i].btn);
    oMarker = new google.maps.Marker({
      'map' : oMap,
      'position' : new google.maps.LatLng( data[i].lat, data[i].lng),
      'content' : data[i].content
    });
 
    // création d'une closure
    (function( marker){
      // fonction sur lien
      oAction.onclick = function(){
        google.maps.event.trigger( marker, 'click');
      };
      // fonction sur click marker
      google.maps.event.addListener( marker, 'click', function(){
        infoWindow.setContent( this.content);
        infoWindow.open( this.getMap(), this);
      });
    })(oMarker);
	}
});
</script>
</head>
<body>
<div id="div_carte"></div>
<button id="bt_marker1">ouvrir marker 1</button>
<button id="bt_marker2">ouvrir marker 2</button>
</body>
</html>

ceci n'est qu'un exemple...

**lolalilo** · 25/01/2012, 18h08

Si tu préfères, le jour où tu ajouteras des marqueurs, dupliquer les lignes de code, libre à toi,

comme je le signalais précédement personnellemnt je genere chaque marker à partir d'une BDD en PHP, donc je n'ai rien a dupliquer ou a copier/coller de ce coté là, et cette construction du code me convient parfaitement pour cela. Il est simple et efficace.

que les données soit stokées par un array ou directement definit chacun comme une variable cela m'est un peu egal, ca prend le meme poids, à la différence que je peux verifier que chacun d'entre eux ne comporte pas d'erreurs en lisant le code source de ma page depuis mon navigateur... ce qui est aussi bien pratique pour debugger...

donc je pense que mon programme est suffisamment bien pensé, mais merci quand même.

Aussi vous pourrez sans doute utiliser cette discussion pour alimenter la FAQ concernant google map API, C'est une question assez pertinante je pense que de savoir faire cela. (et a vrais dire c'est assez utile quand plusieurs markers sont sur la carte).