Google Maps API V3 - 複数のポリゴンのためのカスタムインフォボックス

Question

これは私の初めてのGoogle Maps APIでの作業です。私はそれぞれが独自の情報枠を必要とする複数のポリゴンを持つスタイルマップを持っています。 infoboxesは、スタイリングする必要があります。私の問題は、私が情報会社に仕事をさせることができないということです。私は今何日も解決策を探していましたが、私もこれを試しましたhttp://google-maps-utility-library-v3.googlecode.com/svn/tags/infobox/1.1.9/examples/infobox-basic.html私は明らかに何か間違っている必要があります。

ここに私のコードです：http://pastebin.com/M23PPXpn

Answer 1

で、この遊び場を試してみて、私はinfobox.js

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

でこのエラーでポリゴン結果にインフォボックスを取り付けるそれができることに気づきましたポリゴンは領域を表し、マーカーは点を表すためです。私はあなたのポリゴンのどこかにそれぞれのインフォボックスを固定するための単一の目に見えないマーカーを作成することをお勧めします。

このアイデアで、私はオーストラリアのポリゴンにインフォボックスを追加しました。クリックリスナーはまだポリゴン用に作成されていますが、目に見えないマーカーに関連付けられた情報ボックスが開きます。

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

は例Playground