API Gmaps v3 -> Contenu de la fenêtre d'information non affiché

Question

J'utilise l'API Google Maps v3 sur mon site Web et j'essaie d'afficher les marqueurs d'un markersArray.

Voici le code correspondant :

var map;
var markersArray = [];
var infowindow;
var marker;

Ensuite, j'ajoute les marqueurs dans une boucle au tableau, en appelant la fonction suivante

function addMarker(location, name) {
      marker = new google.maps.Marker({
      position: location,
      map: map,
      company: name,
      title: name
   });
   markersArray.push(marker);
}

J'essaie ensuite d'afficher les marqueurs, ce qui fonctionne à merveille, en utilisant cette fonction :

function showOverlays() {
   if (markersArray) {
      for (var i in markersArray) {
         markersArray[i].setMap(map);
         google.maps.event.addListener(markersArray[i], 'click', function () {
         infowindow.setContent('<div style="height:300px; color:black">' + this.title +     '</div>');
         infowindow.open(map, this);
         });
      }
   }
}

Mon problème est le suivant : le contenu de l'info-fenêtre ne s'affiche pas. Elle s'ouvre, mais rien ne s'affiche... Si j'y place un div de 300px de haut, l'infoWindow se redimensionne correctement.... mais aucun contenu ne s'affiche.

J'ai cherché sur le web et essayé de le bricoler, mais en vain.

Quelqu'un a-t-il rencontré ce problème et pourrait-il me donner un indice sur la manière de le résoudre ?

Merci d'avance !

Chris

Answer 1

Je viens de trouver l'erreur !

J'ai fait styliser la div parent (la div dans laquelle se trouve le canevas de la carte) avec CSS... et j'ai fixé le z-index à 11. Apparemment, cela empêchait le contenu de la fenêtre d'information d'être en haut...

J'espère que cela aidera certaines personnes qui auraient fait la même "erreur" :)

Merci à kevmc d'avoir essayé de m'aider.

Answer 2

Je pense que l'objet marqueur n'a pas d'attribut title, vous devez le récupérer en utilisant getTitle() :

function showOverlays() {
   if (markersArray) {
      for (var i in markersArray) {
         markersArray[i].setMap(map);
         google.maps.event.addListener(markersArray[i], 'click', function () {
         infowindow.setContent('<div style="height:300px; color:black">' + this.getTitle() +     '</div>');
         infowindow.open(map, this);
         });
      }
   }
}