スポンサードリンク

Tag Archives: 情報ウィンドウ

ブログ中の記事や写真を折りたたんで隠しておき、クリックしたら表示させるCollapsible Elements/WordPressプラグイン

ブログの記事が表示されたときには、アコーディオンのように折りたたんでおいて、クリックされたら、記事や写真を表示させるプラグインCollapsible Elements

ちょいと手間ですが、自分の好きなように設定できるのでいいかも。

  Read more »

XMLファイル(配列)の複数マーカーから特定markerのインフォウィンドウ(infowindow)を最初から一つだけ表示するサンプルデモ完成


<目次>始めに地図を読み込んだ時、複数のマーカーから任意の一つのインフォウィンドウ(infowindow)を最初から表示する。

◆  インフォウィンドウ(infowindow)を最初から一つだけ表示する方法の検討

1.特定の要素を取り出すfor文の追加

さて、前回配列から特定の要素だけ取り出すことができましたので最初に作ったサンプル地図に合わせていきます。

結局、最初に思いついたのが、for (var i = 0; i < markers.length; i++) で、配列から全てのマーカーを表示させておき、別のfor文でインフォウィンドウを最初から地図に表示させたい特定のマーカーの要素を、for (var i = 6; i <= 6; i++) (この場合6番目の要素)で取り出す案です。・・・というかコレぐらいしか思いつきませんでした。

試していきます。

さて、ここで作ったサンプルマップに、2つめの特定の要素を読み出すfor文を追加します。

Read more »

イベントリスナー’dragstart’で、地図をドラッグしたらマーカーのインフォウィンドウ(吹き出し)を閉じて削除する。


<目次>始めに地図を読み込んだ時、複数のマーカーから任意の一つのインフォウィンドウ(infowindow)を最初から表示する。

◆ Google Maps API v3 / インフォウィンドウ(吹き出し)を地図の中心に表示させる。

前回作成した地図でインフォウィンドウ(吹き出し)を地図の中心に表示させたのはいいのですが、他のマーカーが隠れてしまっています。

これを改善するために、ユーザーが地図を動かしたら、そのインフォウィンドウを消してしまいましょう。

これには、イベントリスナーのdragstart(地図のドラッグがスタート)を使います。似たサンプルで地図の移動が終了したらイベントを発生させるサンプルがあります。このサンプルはdragend(地図のドラッグがエンド)で、データベースからマーカーを都度も見込むのに使っています。参考にどうぞ

コードは、下記の通りです。google.maps.event.addListenerに’dragstart’を指定します。

Read more »

マーカーのインフォウィンドウ(吹き出し)を地図の中心座標に表示させるpanTo()メソッドを使ったサンプル


<目次>始めに地図を読み込んだ時、複数のマーカーから任意の一つのインフォウィンドウ(infowindow)を最初から表示する。

◆ Google Maps API v3 / インフォウィンドウ(吹き出し)を地図の中心に表示させる。

前回作成した地図にインフォウィンドウ(吹き出し)を地図の中心に表示させるためのコードを追加しておきます。

map.panToを使います。とりあえずクリックイベントに追加。これで、マーカーをクリックすると地図の中心座標にインフォウィンドウが表示されることになります。あとで、地図が初期表示されたときのインフォウィンドウも同じコードで地図の中心座標に表示させます。

Read more »

始めに地図を読み込んだ時、複数のマーカーから任意の一つのインフォウィンドウ(infowindow)を最初から表示する。


◆ Google Maps API v3 / 複数のマーカーから任意の一つのインフォウィンドウ(infowindow)を最初から表示する。

Google Maps API V3で大量多数マーカー(アイコン)多数ののmarkerデータを読み込んだ後に、一つだけ最初から希望するインフォインフォウィンドウ(infowindow)を開いておく(表示させる)案がないか考えていきます。

ともかく、XMLファイルからマーカー(marker)を配列に読み込んで、配列から希望する要素のインフォウィンドウを表示する手段を下記の順で検討してみました。

当方素人ですので、あくまで参考程度で・・・・。

Read more »

インフォウィンドウのサイズの大きさを指定変更する方法

◆ Google Maps API v3 / インフォウィンドウのサイズの大きさを指定する方法

インフォウィンドウのサイズ指定についてメモ。

インフォウィンドウっていざいろいろやろうとすると結構難しい。

何も指定しなくとも画像を指定すれば、勝手にちょうど良い大きさに変わってくれるのですが・・・・・・・・

大きさを指定したい場合は、次の案があります。

Read more »

YouTube動画を情報吹き出し(インフォウインドウ)に表示する

◆ Google Maps API v3 / Youtube動画を吹き出し(インフォウインドウ)に表示する

Youtubeの動画をインフォウィンドウ(infowindow)に表示させてみます。

1.先ずYouTubeにアクセス

YouTubeサイト

2.YouTube動画の下部にある埋め込みコードをコピペして

3.infowindowの吹き出しコンテンツに貼り付けます。

Read more »

Youtube 動画を吹き出し(情報ウィンドウ/インフォウィンドウ)に表示するサンプル/Google Maps API

Google Maps V3用はコチラ

Google Maps の地図上で、アイコン(マーカー)をマウスクリックするとYoutube 動画を吹き出し(インフォウインドウ)に表示するサンプルです。
◆HTMLサンプル

<body onload=”load();onunload=”GUnload();“>
<div id=”map100″>Loading…</div>

Read more »

スポンサードリンク