Discussion :

[cocobelle89]

Bonjour j'ai un problème avec mes infobulles.

Explication:

J'ajoute un évenement sur ma carte qui me permet de créer des marqueurs que je stocke dansun tableau appelé tabMarqueurs.

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
 var tabMarqueurs = new Array();
var contentString;
var infowindow = new google.maps.InfoWindow({
		disableAutoPan: true
	});	
 
	function initialize() {
 
		var Ensibs=new google.maps.LatLng(47.218371, -1.553621000000021);
		var myOptions = {
			center: Ensibs,
			zoom: 18,
			mapTypeId: google.maps.MapTypeId.ROADMAP
		};		
 
		var map = new google.maps.Map(document.getElementById("map_canvas"),
			myOptions);
 
		//Evenements du clic de la souris sur la carte
		google.maps.event.addListener(map, 'click', function(event) {
			addMarker(event.latLng,map);
 
		});
		marker_proprety(map);
	}

voici ma fonction addMarker:

Code :

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

1
2
3
4
5
6
7
8
9
function addMarker(location,map) {
		var marker = new google.maps.Marker({
			position: location,
			map: map,
			clickable: true,
			flat: true
		});
		tabMarqueurs.push(marker);	
	}

Ensuite je parcours mon tableau de marqueur et j'ajoute un évenement sur chaque marqueur pour ouvrir mon infobulle.

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
function marker_proprety(map){
		var i;
		for (i = 0; i < tabMarqueurs.length; i++) {  
			var marker=tabMarqueurs[i];
			listener(marker,map);
		}
	}
 
	function listener (marker,map) {
 
		 infowindow.setContent(contentString);
		google.maps.event.addListener(marker, 'click', (function(marker) {
		return function(){	
			infowindow.open(map,marker);
		}	
		})(marker));
	}
 
 	function setColor(color,marker){
		marker.setZIndex(1);
		marker.setIcon("images/couleur_"+color+".png");
		var text=document.getElementById("page_point").value;
		marker.setTitle(text);
	}

Le problème c'est que le programme ne reconnait pas le paramètre marker qui se trouve dans la déclaration du contenu de mon infobulle (contentString).
je met des images dans mon infobulle avec l'evenement onClick()=setColor(color,marker);

Merci d'avance !

Le contenu de mon infobulle est:
ci-joint, le contenu de mon infobulle

dans firebug, il me dit a chaque fois:
que dans mon événement onClick(): marker n'est pas défini

Merci

[NoSmoking]

Bonsoir,
beaucoup de maladresses dans l'écriture de contentString.

Les balises IMG n'acceptent pas de balise de fermeture </img>.

Les balises DIV se ferme de la sorte </div> et non <div/>.

Bon cela n'est pas grave...mais il est incorrect d'écrire OnClick="setColor(\'rouge\',marker);", cela donnera forcement undefined attendu que marker représente une variable dans la chaine.

Il serait plus judicieux de mettre 'onclick="setColor(\'rouge\',' +marker +');"', en minuscule pour l'événement c'est mieux.

[cocobelle89]

Je te remercie NoSmoking.

Mais j'ai maintenant une erreur avec firebug:

missing ] after element list
[Stopper sur une erreur]

setColor('bleu',[object Object]);

Je ne vois pas à quoi correspond l'erreur

[NoSmoking]

...mais il est incorrect d'écrire OnClick="setColor(\'rouge\',marker);", cela donnera forcement undefined attendu que marker représente une variable dans la chaine.

Il serait plus judicieux de mettre 'onclick="setColor(\'rouge\',' +marker +');"', en minuscule pour l'événement c'est mieux.

bois en bien du produit NoSmoking, quel ...la seconde écriture renseigne l'objet converti en String, donc

Simplement dans ton écriture, qui est donc juste, au moment de l'action la variable marker ne fait plus partie du scope, donc est undefined.


-------------------------------------------
Bon reprenons...calmement

commençons par un truc tout simple, l'utilisation d'un noeud comme contenu de l'infoWindow, cela est plus facile à écrire et à débugger.

Pour ta variable contentString cela donnerait

Code html :

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
<div style="display:none">
  <div id="popup" >
    <label>Entrer la page html ou le nombre de points</label><br>
    <input type=text value="" name="Page_Point" id="page_point"> <br>
    <div>
      <img src="images/couleur_bleu.png"  alt="couleur_bleu"  onclick="setColor('bleu',oMarker);">
      <img src="images/couleur_rouge.png" alt="couleur_rouge" onclick="setColor('rouge',oMarker);">
      <img src="images/couleur_noir.png"  alt="couleur_noir"  onclick="setColor('noir',oMarker);">
    </div>
    <div>
      <img src="images/couleur_rose.png"  alt="couleur_rose"  onclick="setColor('rose',oMarker);">
      <img src="images/couleur_jaune.png" alt="couleur_jaune" onclick="setColor('jaune',oMarker);">
      <img src="images/couleur_vert.png"  alt="couleur_vert"  onclick="setColor('vert',oMarker);">
    </div>
  </div>
</div>

on l'englobe dans une DIV cachée, pour quelle n'apparaisse pas à l'écran, et tu la places dans le document.

pour l'infoWindow, on crée une infoWindow comme tu l'a fait en lui attribuant le contenu directement

Code :

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

1
2
3
4
var oInfo = new google.maps.InfoWindow({
  content : document.getElementById('popup'), // transfert l'élément dans l'infoWindow
  disableAutoPan: true
});

il est à noter que la DIV est détachée du document pour être ajoutée dans l'infoWindow.

pour la création des marker
il nous faut d'abord un marker global qui sera le marqueur venant d'être cliqué

Code :

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

var oMarker;

au moment de la création d'un marker, on lui affecte directement l'événement onclick

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
function addMarker(location,map) {
  var marqueur = new google.maps.Marker({
      position: location,
      map: map,
      clickable: true,  // valeur par défaut donc pas nécessaire
      flat: true
    });
  google.maps.event.addListener( marqueur, 'click', function() {
      oMarker = this;   // initialise le marqueur encours
      oInfo.open( this.getMap(), this);
    });
  tabMarqueurs.push(marqueur);	
}

voila cela devrait le faire...

[cocobelle89]

Bonjour NoSmoking,

Je te remercie pour ton aide, cela m'a beaucoup aidé, mon programme marche beaucoup mieux


sinon j'aimerai savoir si on peux faire une fonction sur le zoom qui permet de garder la distance entre mes deux images et que cela ne change pas en fonction du zoom?

Je suis preneur si tu as une petite idée merci

[NoSmoking]

les marker sont des objets issus de l'API googleMap, dans ce contexte tu peux lui ajouter des propriétés, des méthodes comme bon t'est utile en faisant toutefois de ne pas entrer en conflit avec les propriétés/méthodes existantes.

Tu peux donc tout à fait faire à l'initialisation d'un marqueur

Code :

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

1
2
3
4
5
6
7
8
    oMarker = new google.maps.Marker({
      mesDonnees : { // création d'un objet perso pour sauvegarder les données
        'image' :'',
        'titre' :'ceci est le titre par défaut du marqueur.'
      },
      position : oLatLng,
      map : map
    });

par la suite, dans ta fonction setColor() par exemple, tu peux mettre à jour les données

Code :

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

1
2
3
4
5
6
7
8
function setColor( couleur, obj){
  // mise à jour des données
  obj.mesDonnees.image = 'http://maps.google.com/mapfiles/marker_' +couleur +'.png';
  obj.mesDonnees.titre = document.getElementById("page_point").value;
  // mise à jour marker
  obj.setIcon( obj.mesDonnees.image);
  obj.setTitle( obj.mesDonnees.titre);
}

ou inversement

Code :

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

1
2
3
4
5
6
7
8
function setColor( couleur, obj){
  // mise à jour marker
  obj.setIcon ('http://maps.google.com/mapfiles/marker_' +couleur +'.png');
  obj.setTitle( document.getElementById("page_point").value);
  // mise à jour des données
  obj.mesDonnees.image = obj.getIcon();
  obj.mesDonnees.titre = obj.getTitle();
}

Et l'autre soucis c'est une fonction qui permet de garder la distance entre mes deux images et que ce la ne change pas en fonction du zoom?

je ne saisi pas le soucis, les marqueurs étant à une position fixe sur le carte, sauf si draggable bien sûr.

Cela me pose un petit problème car à la fin je dois pouvoir enregistrer tous mes marqueurs dans la base de données une fois que l'administrateur aura cliqué sr le bouton 'fin'.

compte tenu de cela il semble préférable de maintenir un tableau de tous tes marker pour pouvoir récupérer les données de deux ci.

[cocobelle89]

Bonjour NoSmoking,

merci pour tout, j'ai opté pour la création de deux arrays (tabMarqueurs pour les icônes et tabIcone pour mes icônes images.
à chaque fois que j'ajoute un marqueur dans le premier tableau, j'ajoute en même temps l’icône dans mon autre tableau.
Donc j'ai juste à parcourir mon tableau de marqueur et récupérer avec l'index en cours mon icône.

Pour l'autre partie c'est vrai que les marqueurs sont fixes au début.
Je ne sais pas si c'est possible d'ajouter des événements sur le zoom de la carte et diminuer ou augmenter la distance des marqueurs en fonction de ce dernier.

En tout cas merci pour ton aide précieuse