Infobulles

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:

---

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:

---

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:

---

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

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.

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

:boulet:

Citation:

---

Envoyé par 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 :traine:...la seconde écriture renseigne l'objet converti en String, donc :fessee::sm:

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.


-------------------------------------------:oops:
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:

---

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:

---

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:

---

var oMarker;

---

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

Code:

---

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

Bonjour NoSmoking,

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


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

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:

---

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:

---

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:

---

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

---

Citation:

---

Envoyé par cocobelle89

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.

Citation:

---

Envoyé par cocobelle89

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.

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:)

Citation:

---

Envoyé par cocobelle89

Je ne sais pas si c'est possible d'ajouter des événements sur le zoom de la carte...

---

Code:

---

1 2 3

google.maps.event.addListener( map, 'zoom_changed', function() { alert( this.getZoom()); });

---

Citation:

---

Envoyé par cocobelle89

...diminuer ou augmenter la distance des marqueurs en fonction de ce dernier

---

lors d'un zoom[+] les marqueurs semblent s'écarter et lors du zoom[-] ils semblent se rapprocher mais en absolue ils gardent les mêmes lat/lng.