ブログの記事が表示されたときには、アコーディオンのように折りたたんでおいて、クリックされたら、記事や写真を表示させるプラグインCollapsible Elements。
ちょいと手間ですが、自分の好きなように設定できるのでいいかも。
スポンサードリンク
<目次>始めに地図を読み込んだ時、複数のマーカーから任意の一つのインフォウィンドウ(infowindow)を最初から表示する。
さて、前回配列から特定の要素だけ取り出すことができましたので、最初に作ったサンプル地図に合わせていきます。
結局、最初に思いついたのが、for (var i = 0; i < markers.length; i++) で、配列から全てのマーカーを表示させておき、別のfor文でインフォウィンドウを最初から地図に表示させたい特定のマーカーの要素を、for (var i = 6; i <= 6; i++) (この場合6番目の要素)で取り出す案です。・・・というかコレぐらいしか思いつきませんでした。
試していきます。
さて、ここで作ったサンプルマップに、2つめの特定の要素を読み出すfor文を追加します。
<目次>始めに地図を読み込んだ時、複数のマーカーから任意の一つのインフォウィンドウ(infowindow)を最初から表示する。
前回作成した地図でインフォウィンドウ(吹き出し)を地図の中心に表示させたのはいいのですが、他のマーカーが隠れてしまっています。
これを改善するために、ユーザーが地図を動かしたら、そのインフォウィンドウを消してしまいましょう。
これには、イベントリスナーのdragstart(地図のドラッグがスタート)を使います。似たサンプルで地図の移動が終了したらイベントを発生させるサンプルがあります。このサンプルはdragend(地図のドラッグがエンド)で、データベースからマーカーを都度も見込むのに使っています。参考にどうぞ。
コードは、下記の通りです。google.maps.event.addListenerに’dragstart’を指定します。
<目次>始めに地図を読み込んだ時、複数のマーカーから任意の一つのインフォウィンドウ(infowindow)を最初から表示する。
前回作成した地図にインフォウィンドウ(吹き出し)を地図の中心に表示させるためのコードを追加しておきます。
map.panToを使います。とりあえずクリックイベントに追加。これで、マーカーをクリックすると地図の中心座標にインフォウィンドウが表示されることになります。あとで、地図が初期表示されたときのインフォウィンドウも同じコードで地図の中心座標に表示させます。
スポンサードリンク