Google Maps API V3 - Infobox personnalisé pour plusieurs polygones

Question

C'est ma première fois que je travaille avec l'API Google Maps.J'ai une carte de style avec plusieurs polygones qui ont chacun besoin de leur propre infobox.Les infoboxes doivent être stylés.Mon problème est que je ne peux pas faire fonctionner les infoboxes du tout.Je cherche une solution pendant des jours maintenant, j'ai même essayé ceci http://google-maps-utilité-library-v3glecode.com/svn/tags/infobox/1.1.9/examples/infobox-basic.html Je dois évidemment faire quelque chose de mal.

Voici mon code: http://pastebin.com/m23ppxpn

Answer 1

J'ai remarqué que la fixation d'une infobox à un polygone entraîne cette erreur dans Infobox.js

Uncaught TypeError: Object #<V> has no method 'getPosition'

Ce pourrait être parce qu'un polygone représente une zone, tandis qu'un marqueur représente un point.Je suggère de créer un seul marqueur invisible quelque part dans vos polygones pour ancrer chaque infobox.

Avec cette idée, j'ai ajouté une infobox au polygone de l'Australie.L'écoute de click est toujours créée pour le polygone, mais elle ouvre l'infobox attaché au marqueur invisible.

// ... this is near the end of your code...

australia_new_zealand.setMap(map);
google.maps.event.addListener(australia_new_zealand, 'mouseover', function() {
    this.setOptions({fillColor: "#28d1e9"}); 
});
google.maps.event.addListener(australia_new_zealand, 'mouseout',function(){
 this.setOptions({fillColor: "#06376a"});   
});

      // marker inside the Australia polygon, LatLng was manually defined
      var australia_new_zealand_center = new google.maps.Marker({
        map: map,
        position: new google.maps.LatLng(-24.5271348225978, 134.296875),
        visible: false
      });

      var boxText = document.createElement("div");
      boxText.style.cssText = "border: 1px solid black; margin-top: 8px; background: yellow; padding: 5px;";
      boxText.innerHTML = "City Hall, Sechelt<br>British Columbia<br>Canada";

      var myOptions = {       
        content: boxText,
        maxWidth: 0,
        pixelOffset: new google.maps.Size(-140, 0),
        zIndex: null,
        boxStyle: {  background: "url('tipbox.gif') no-repeat", opacity: 0.75, width: "280px" } ,
        closeBoxMargin: "10px 2px 2px 2px",
        closeBoxURL: "http://www.google.com/intl/en_us/mapfiles/close.gif",
        infoBoxClearance: new google.maps.Size(1, 1),
        isHidden: false,
        pane: "floatPane",
        enableEventPropagation: false
      }

      // listener responds to a click inside polygon
      google.maps.event.addListener(australia_new_zealand, "click", function (e) {
        ib.open(map, australia_new_zealand_center);
      });

      var ib = new InfoBox(myOptions);

//(end) REGION - AUSTRALIA NEW ZEALAND
}  

Answer 2

Essayez ce terrain de jeu avec des exemples terrain de jeu