WordPressにGoogle Maps API V3！

◆ Google Maps API v3 サイドバー(sidebar)をクリックしてinfowindowを開く

グーグルマップの外側に、アイコン（マーカー）をクリックしたときと同じように、インフォウィンドウ（infowindow）を開くことの出来るサイドバー（sidebar）（※マーカーリストともいうのか？）を追加してみる。

今回は、私的に苦戦。Googel先生のデモ、スプレッドシートからの読み込みも最後にうまく動かん・・・やりたいことが出来ん。V3サイドバー付きの良いサンプルも見当たらない？何故？

まあ、結局はV2版参考にせこせこ変更して出来たのだが・・・・・・・V3+サイドバー。遅いと評判のブラウザIE7で、約120マーカーを読み込むとサイドバーのせいか非常に遅い！！

これでは、使えんな。次のサンプルをIE7でお試しください。

＜サンプル地図＞

• 地図の外のサイドバー（sidebar、Markerlist）をクリックしてインフォウィンドウを開く

◆ Google Maps API v3 サイドバー(sidebar)にマーカーと同じアイコン画像を選択して表示させる

数十マーカーなら使えそうなサイドバー付きグーグルマップV3。しかし、上記サンプルを作成後気が付いたが、何か見にくい？探しにくい？　これじゃサイドバーは不要ですな。 そこで、マーカのアイコン指定と同じように、オブジェクトを使って、繰り返し関数から読み出した「category」の「公園」「温泉」「動物園」に併せて、サイドバーの中にもアイコン画像を指定してみたサンプル。 これなら、見やすいかも。

＜サンプル地図＞

• サイドバー（sidebar）の中にもアイコンを表示する

追加分・・・・script

var imgicons = {

‘kouen':'<img src=”http://maps.google.co.jp/mapfiles/ms/icons/tree.png” border=”0″ width=”28″ height=”28″ alt=”公園”/>’,

‘onsen':'<img src=”http://maps.google.co.jp/mapfiles/ms/icons/hotsprings.png” border=”0″ width=”28″ height=”28″ alt=”温泉”/>’,

‘doubutsu':'<img src=”http://maps.google.co.jp/mapfiles/ms/icons/horsebackriding.png” border=”0″ width=”28″ height=”28″ alt=”動物園”/>’

};

var sidebaricon = imgicons[category] || {};

sidebarhtml += ‘<table border=”1″ cellspacing=”2″ cellpadding=”2″ id=”HPB_TABLE_2_A_101114020233″ class=”hpb-cnt-tb1″> \

<thead> \

<tr> \

<td class=”hpb-cnt-tb-cell2″ width=”40″>’ +  sidebaricon + ‘</td> \

<td class=”hpb-cnt-tb-cell2″ width=”180″><a href=”javascript:myclick(‘ + i + ‘)”>’ + name + ‘</a></td> \

</tr> \

</thead> \

<tbody>';

◆Google Maps JavaScript API V3　サンプル

• 地図の外のサイドバー（sidebar、Markerlist）をクリックしてインフォウィンドウを開く
• サイドバー（sidebar）の中にもアイコンを表示する

◆今回お世話になったサイト様

• Javascript入門

◆Google Maps JavaScript API V3

• Google Maps API v3 目次に戻る
• MarkerClusterer v3 目次に戻る

◆「Google Maps API v3 サイドバー sidebar」Web、写真、ブログ、動画検索

スポンサードリンク