このページでは、サイドバー リンクをマーカーに接続する 1 つの方法を示します。
http://www.wolfpil.de/v3/toggle-cats.html
gmarkers
このページのパターンをケースにコピーするには、グローバル変数が必要です
//<![CDATA[
var map = null;
var gmarkers = [];
function initialize() {
マーカーを追加する順序は重要です。サイドバーのビジネスの順序と一致する必要があります。gmarkers
で更新されcreateMarker
ます。
var point = new google.maps.LatLng(37.984798,-121.312094);
var marker = createMarker(point,'<div style="width:205px"><center><img src="images/sampleuopsign.jpg" /></center><h2>University of the Pacific</h2>3601 Pacific Avenue<br>Stockton, California 95211<br>209.946.2011<br><small>On the web visit: <a href="http://www.pacific.edu">www.Pacific.edu<\/a></small><\/div>')
...
function createMarker(latlng, html) {
var contentString = html;
var marker = new google.maps.Marker({
position: latlng,
map: map,
zIndex: Math.round(latlng.lat()*-100000)<<5
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.setContent(contentString);
infowindow.open(map,marker);
});
gmarkers.push(marker);
}
配列を配置したら、インデックスでそれらをアドレス指定できます。Wolfpil は、サイドバー エントリ (リンク) がクリックされると、単純にクリック イベントをトリガーします。
function triggerClick(i) {
google.maps.event.trigger(gmarkers[i],"click");
}
各リンクは次のように記述できます。0 と 1 を各マーカーが追加された順序に置き換えます。
<a href="javascript:triggerClick(0)">Bank of America</a>
<a href="javascript:triggerClick(1)">Bank of Stockton</a>
タイトルを表示するマーカー ホバーについては、マーカーをtitle
作成するときにオプションを追加するのが最も簡単な方法ですが、それは createMarkers 関数に新しいパラメーターを追加することを意味します。
function createMarker(latlng, storeName, html) {
var contentString = html;
var marker = new google.maps.Marker({
position: latlng,
map: map,
title: storeName,
zIndex: Math.round(latlng.lat()*-100000)<<5
});
長期的にgmarkers
は、配列の代わりにオブジェクトを使用することをお勧めします。リストの途中にアイテムを追加すると、HTML 内の既存のアイテムが整理されなくなるためです。
次に、場所を などの文字列 ID で呼び出すことができますgmarkers['safeway']
。の配列にマーカーをプッシュする代わりにcreateMarker
、ID をマーカーに割り当てます。
gmarkers[id] = marker;
問題が発生した場合は、下にコメントを書いてください。上記のコードはテストしていません。