Lien <a> pour ouvrir googlemap infowindow

**UserC** · 30/09/2013, 14h04

Bonjour,
j'ai besoin d'avoir un lien classique <a href...> pour ouvrir une infowindow de googlemap. Je ne retrouve pas exactement la fonction a appeler pour faire la jonction avec le code javascript qui génère les liens depuis un document xml :

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
<script type="text/javascript">
  var infowindow;
  var map;
 
  function initialize() {
    var myLatlng = new google.maps.LatLng(37.4419, -122.1419);
    var myOptions = {
      zoom: 10,
      center: myLatlng,
      mapTypeId: google.maps.MapTypeId.ROADMAP
 
    }
 
    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
 
 
	//download and creates markers
    downloadUrl("moredata.xml", function(data) {
      var markers = data.documentElement.getElementsByTagName("marker");
 
      for (var i = 0; i < markers.length; i++) {
 
        var latlng = new google.maps.LatLng(parseFloat(markers[i].getAttribute("lat")),
                                    parseFloat(markers[i].getAttribute("lng")));
 
 
		var html ='blabla';
 
 
        var marker = createMarker(markers[i].getAttribute("name"), latlng, html, image);
 
       }
     });
 
  }
 
 
  function createMarker(name, latlng, html, image) {
    var marker = new google.maps.Marker({
		position: latlng,
		map: map,
	    icon: image
		});
    google.maps.event.addListener(marker, "click", function() {
      if (infowindow) infowindow.close();
      infowindow = new google.maps.InfoWindow({content: html});
      infowindow.open(map, marker);
    });
 
    return marker;
  }
 
 
</script>

En outre, je récupère le document xml en php et redistribue ailleurs dans la page les infos. J'ai juste besoin de faire un lien direct depuis le html vers la googlemap.

Code php :

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

1
2
3
4
5
6
7
8
9
<?php
$xml = simplexml_load_file("moredata.xml");
$j=0;
foreach ($xml->marker as $marker) {
	$j=$j+1;
	echo '<b>&bull; <a href="javascript:marker('.$j.')" class="regtext">'.$marker["name"].'</a></b><br>';
 
};
?>

Seulement, le lien n'ouvre rien...
Merci d'avance.

**NoSmoking** · 30/09/2013, 18h47

Bonjour,
j'ai un peu de mal à saisir le format de ton fichier moredata.xml, peux tu nous en montrer une ou deux lignes.

Sinon il te suffirais de créer dynamiquement les liens en les faisant pointer sur une fonction qui ouvre les infoWindows à chaque fois que tu crées un marker.

**UserC** · 02/10/2013, 15h07

Bonjour,
suite et pas fin, donc, a force de regarder des forums sur le sujet, j'en suis venu à la conclusion qu'il me serait difficile de concilier à ce niveau le javascript et le php, j'ai donc remis le nez dans mon java.

Donc, j'ai reformulé la chose :

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
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="util.js"></script>
<script type="text/javascript">
  var infowindow;
  var map;
 
  function initialize() {
    var myLatlng = new google.maps.LatLng(37.4419, -122.1419);
    var myOptions = {
      zoom: 10,
      center: myLatlng,
      mapTypeId: google.maps.MapTypeId.ROADMAP
 
    }
 
    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
 
 
	//download and creates markers
    downloadUrl("moredata.xml", function(data) {
      var markers = data.documentElement.getElementsByTagName("marker");
 
      for (var i = 0; i < markers.length; i++) {
 
        var latlng = new google.maps.LatLng(parseFloat(markers[i].getAttribute("lat")),
                                    parseFloat(markers[i].getAttribute("lng")));
 
 
 
		var html = 
		'</div>bla'+
		'</div>';
 
		if(markers[i].getAttribute("category")=="home"){ var image="../source/google-maps-icons/qualivox.png" };
 
        var marker = createMarker(markers[i].getAttribute("name"), latlng, html, image);
 
 
 
		if(!myhtml){
		var myhtml = '<b>&bull; <a href="javascript:click(' + i + ')" class="regtext">'+markers[i].getAttribute("name")+'<\/a></b><br>';
		}else{
		var myhtml = myhtml+markers[i].getAttribute("name")+'<br/>';
		}
		document.getElementById("side_bar").innerHTML = myhtml;
 
 
       }
     });
 
  }
 
 
  function createMarker(name, latlng, html, image) {
    //creates a marker
	var marker = new google.maps.Marker({
		position: latlng,
		map: map,
	    icon: image
		});
	//creates click
    google.maps.event.addListener(marker, "click", function() {
      if (infowindow) infowindow.close();
      infowindow = new google.maps.InfoWindow({content: html});
      infowindow.open(map, marker);
    });
 
 
    return marker;
  }
 
 
</script>

Voila pour le javascript - Je me doute que la manière d'écrire les noms de mes markers dans "side-bar" va faire hurler quelques coders mais bon, cela fonctionne (Je retrouve mon listing dans "side-bar"). Reste que mon lien <a href="javascript:click(' + i + ')"> ne fonctionne pas parce que "click is not defined" dixit console.

No smoking, ci-dessous, copie de mon document xml. Il sagit d'un xml de test, le reel est ecrit à la volée parce qu'il s'inscrit dans une série de page php.

Code xml :

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

1
2
3
4
5
6
7
8
<markers>
<marker name="Peter0" address="1" lat="37.413322" lng="-122.125605"/>
<marker name="Peter1" address="2" lat="37.413322" lng="-123.125605"/>
<marker name="Peter2" address="3" lat="37.413323" lng="-124.125606"/>
<marker name="Peter3" address="4" lat="37.413324" lng="-125.125607"/>
<marker name="Peter4" address="5" lat="37.413325" lng="-126.125608"/>
<marker name="Peter5" address="6" lat="37.413326" lng="-127.125609"/>
</markers>

Voila smoking pour ton aide, suis sur qu'il ne sagit vraiment de pas grand chose mais le java est un peu étrange pour moi quelques fois.

**NoSmoking** · 02/10/2013, 19h05

Reste que mon lien <a href="javascript:click(' + i + ')"> ne fonctionne pas parce que "click is not defined" dixit console.

normal, elle est définie où ta fonction click, car comme tu l’appelles il s'agit d'une fonction.

A quoi sert "javascript:" dans une balise HTML ?.

Je te laisse déjà regarder ce point.

**UserC** · 03/10/2013, 10h51

noSmoking, merci pour l'intérêt que tu portes à mon sujet, comme tu peux te douter, je n'utilise pas javascript de bon coeur mais parce que googlemap v3 me le met dans la gorge.
J'utilisais le pseudo href parce que jusqu'a maintenant, cela m'appelait ma fonction sans trop de soucis, si je le code comme ceci :

Code :

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

1
2
 
var myhtml = '<b>&bull; <a href="" onclick="click(marker' + i + '); return false" class="regtext">'+markers[i].getAttribute("name")+'<\/a></b><br>';

même avec le return false, le click me recharge ma page, ce qui nest pas voulu en l'occurence.

J'ai bien lu le post que tu m'as envoyé mais pédale toujours dans la semoule et les quelques bouts de code que j'administre en plus pour essayer de répondre aux exigences ne font qu'induire des erreurs encore plus graves du systeme.
Bref, pourrais-tu m'indiquer ou et quoi faire pour que mon code reconnaisse simplement le click. Cela fait maintenant quelques jours que le soucis persiste et java me rend dingue!

Merci.

**UserC** · 03/10/2013, 12h23

Donc,
j'ai déclaré ma fonction...

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
 
		if(!myhtml){
		var myhtml = '<b>&bull; <a href="javascript:showinfo(marker'+i+');" class="regtext">'+markers[i].getAttribute("name")+'<\/a></b><br>';
		}else{
		var myhtml = myhtml+markers[i].getAttribute("name")+'<br/>';
		}
		document.getElementById("side_bar").innerHTML = myhtml;
 
		var marker = createMarker(markers[i].getAttribute("name"), latlng, html, image);
       }
     });
 
  }
 
	function showinfo(marker) {
		//alert('hello');
		infowindow = new google.maps.InfoWindow({content: html});
      	infowindow.open(map, marker);
	}

...
le script s'effectue bien avec le alert, par contre, toujours pas avec l'ouverture de InfoWindow. Marker0 (en l'occurrence is not defined).
Merci de vos éclairages.

**UserC** · 03/10/2013, 14h56

J'ai redirigé mon code de créa de lien directement sur le createMarker qui est sans doutes plus justifié...
Le javascript ne reconnait touours pas "marker0 is not defined". bien qu'il soit déclaré avec le googlemarker, et à ma compréhension, il porte le meme nom... PLEASE HELP

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
	function showinfo(marker) {
		//alert('hello');
      	infowindow.open(map, marker);
	}
 
 
  function createMarker(name, latlng, html, image, i) {
 
 
    //creates a marker
	var marker = new google.maps.Marker({
		position: latlng,
		map: map,
	    icon: image
		});
 
	var myhtml = '<b>&bull; <a href="javascript:showinfo(marker'+i+');" class="regtext">'+name+'<\/a></b><br>';
	document.getElementById("side_bar").innerHTML += myhtml;
 
	//creates click
    google.maps.event.addListener(marker, "click", function() {
      if (infowindow) infowindow.close();
      infowindow = new google.maps.InfoWindow({content: html});
      infowindow.open(map, marker);
 
    });
 
 
    return marker;
 
  }

**NoSmoking** · 03/10/2013, 19h33

Je vois que tu as progressé

toujours pas avec l'ouverture de InfoWindow. Marker0 (en l'occurrence is not defined).

tu gagnerais à regarder la

Pourquoi l'InfoWindow n'affiche rien quand je clique sur le marker ?

J'ai redirigé mon code de créa de lien directement sur le createMarker qui est sans doutes plus justifié...

c'est effectivement judicieux pour avoir accès à la référence du marker concerné, et ce même si l'utilisation de innerHTML n'est pas très propre.

Tu peux également regarder un exemple d'Interaction entre éléments du DOM et markers.

**UserC** · 04/10/2013, 15h56

Salut sensei noSmokin,
j'ai bien vu lu et relu les liens, je comprends bien le problème mais franchement, petit scarabé tourne autour du pot depuis 3 jours et il est fatigué de résoudre les énigmes. J'ai vu ton lien pour générer exactement ce qu'il me faut (ou presque à vrai dire parce qu'il me faudraitt un stop freeze sur le infowindow au lieu qu'il disparaisse sur rollOutside des markers apres selection par click). Bref, je sais que tu disposes de la solution et ce n'est que moyennement cool de me donner des bribes d'infos pour que j'avance de 1/2 ligne de code par jour. Je ne suis plus à l'école depuis un certain moment et suis contraint de manger un temps phénoménal sur un problème absolument mineur. Bien que je sois absolument receptif à ton approche pédagogique, pourrais-je avoir une réponse claire? Merci

**NoSmoking** · 05/10/2013, 14h33

<precision>
Tout d'abord il me semble utile de préciser les points suivants.

Les intervenants sur les forums sont des bénévoles et j'ai même entendu que certains avaient une vie en dehors de ceux ci, c'est dingue non?
Ils leur arrivent même, lorsqu'il peut y avoir un doute, de se renseigner avant réponse pour vérification, en lisant les documentations officielles, ce que chacun devrait faire avant de poster.
Il en est également qui testent les solutions proposées. Eh! oui on n'invente pas grand chose, c'est fou non?

Me concernant, le temps consacré au forum n'est pas forcément extensible et régulier et dans certains cas les réponses sont un peu plus laconiques, elles pourrait d'ailleurs ne pas être tout simplement.
Je dois admettre que lorsque mon petit bout de bonhomme, 5ans il est en phase d'apprentissage également, à besoin de moi il passe avant même si je suis en train de rédiger une réponse.

Le but des forums n'est pas de fournir du code clé en main, même si cela peut arriver, mais plutôt la boite à outils et la façon de s'en servir.
</precision>

Ceci étant revenons à ton soucis...

Nous allons essayer de synthétiser ce que tu/nous avons vu au travers de cette discussion.

Pour commencer reprenons la base de la fonction d'initialisation

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
function initCarte(){
  var oLien, oDest = document.getElementById('side_bar');
  var oMap = new google.maps.Map(document.getElementById('div_carte'),{
      'zoom': 10,
      'center': new google.maps.LatLng( 46.80, 1.70),
      'mapTypeId': google.maps.MapTypeId.ROADMAP
    });
  //download and creates markers
  downloadUrl("moredata.xml", function(data){
    // récup. des données
    var oMarkers = data.documentElement.getElementsByTagName('marker'),
        i, nb = oMarkers.length;
    // parcours des datas
    for( var i = 0; i < nb; i++){
      // création des textes cliquables
      oLien = document.createElement('LI');
      // ajout dans liste
      oDest.appendChild( oLien);
      // création du marker
      var marker = createMarker( oMap, oMarkers[i], oLien);
    }
  });
}

le HTML minimum pourrait être

Code html :

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

1
2
<ul id="side_bar"></ul>    <!-- la liste qui va recevoir les textes à cliquer -->
<div id="div_carte"></div> <!-- la zone d'affichage de la carte -->

Si l'on observe la fonction initCarte ci dessus on voit qu'il nous faut définir la fonction createMarker dans laquelle on va faire toute la gestion autour du marqueur afin d'avoir une référence à celui ci.

On va gérer dans celle ci la récupération des données, la création du marker ainsi que les événements liés au clic sur celui ci et sur le texte.

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
function createMarker( map, data, lien){
  // data contient les informations à utiliser
  var pos = new google.maps.LatLng( data.getAttribute('lat'), data.getAttribute('lng'));
  var image = data.getAttribute('category') == 'home' ? '../source/google-maps-icons/qualivox.png' :'';
  var nom = data.getAttribute('name');
  var html  = data.getAttribute('html') || nom;
  //creation du marker
  var marker = new google.maps.Marker({
    'position': pos,
    'map': map,
    'icon': image
  });
  // affecte événement click
  // voir https://developers.google.com/maps/documentation/javascript/reference#MapsEventListener
  google.maps.event.addListener( marker, 'click', function(){
    if( infowindow) infowindow.close();
    infowindow = new google.maps.InfoWindow({
      content: html
    });
    infowindow.open( this.getMap(), this);
  });
  // ajout contenu
  lien.appendChild( document.createTextNode( nom));
  // transfert événement click sur marker
  google.maps.event.addDomListener( lien, 'click', function(){
      google.maps.event.trigger( marker, 'click');
    });
  return marker;  // peut servir
}

Voila, je crois que tout est dit, à toi de gérer le CSS pour que cela ait de l'allure.

<footer>
Je me permettrais de rajouter que la rédaction de cette réponse ne m'a occupé que 3/4h. (ce n'est pas grave c'est l'heure de la sieste!)
Bon je vais faire une pause.
</footer>

**UserC** · 08/10/2013, 17h35

Salut NoSmokin,
désolé pour la réaction... Je comprends bien que les intervenants sont bénévoles et tout ça, la frustration a juste pris le dessus. Suite au message, j'ai fini par reprendre ton code et y insérer à la volée les variables par php. Tout cela marche, merci encore pour ton travail et ton aide.

3/4 heure de debuggage pour un programmateur java se traduit souvent par des heures voir des jours des prise de tete pour le commun des mortels qui ne pense pas trop binaire.

Lien <a> pour ouvrir googlemap infowindow [Google Maps]

APIs Google

Discussions similaires

Partager

Partager