スポンサードリンク

Tag Archives: インフォウィンドウ

インフォウィンドウ(吹き出し)の外部サイトへのリンクURLの記述/iPhoneサイトをjQTouchで作成する。


◆ Google Maps API v3 /外部サイトへのリンクURLの記述/jQTouch iPhone用

jQtouchをつかったGoogle Mapの地図を作成後、PCで動作をチェックしても問題なかったのだが、iPhone(アイフォン)の実機でインフォウィンドウ(吹き出し)部の外部サイトへのURLをクリックしても新しい画面が開かないことに気がついた。何故?

このサイトを読みますと、「jQTouchを使ったサイト内のaタグのhrefはすべてjQTouchのサイト内での動作になります。」とあります。

対策として、別ウィンドウで開くとよいとありましたので、target=”_self” をtarget=”_blank”に試してみましたが開かず・・・・・。

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 »

Google Maps API v3 + サイドバー(sidebar, marker list)をクリックしてインフォウィンドウ(infowindow)を表示させる

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

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

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

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

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

<サンプル地図> Read more »

常にインフォウィンドウを1つだけ表示する方法/Google Maps JavaScript API V3

◆インフォウィンドウを1つだけ表示する方法

Google Maps API v3で気がついたのがインフォウィンドウの開き方。一度クリックファンクションであるマーカーのインフォウィンドウを開くと、次のアイコンをクリックしてもそのまま残ってしまう。

XMLファイルを読み込んで表示する練習をしていた時は、気づかなかった。何故かって、インフォウィンドウが常に一つだから。

しかし、アイコンの種類を変更するサンプルを作成時、次のアイコンをクリックしても前のインフォウィンドウが消えないことに気が付きました。

え~。V3では、わざわざcloseコマンドを使わなければ、インフォウィンフドウを閉じることが出来ないようだ。

良くわからんので、Googleのサンプルを探してたらありました。

Read more »

マーカーのアイコン種類を変更する+影指定/Google Maps JavaScript API V3

Google Maps API V3 の標準マーカのアイコン種類の変更

やはりアイコンの種類をいろいろ変えたいですよね。

取り急ぎ、下記3つメモ。複数マーカーのアイコンを変更するスマートな方法はないでしょうかね。

Read more »

1 / 212

スポンサードリンク