スポンサードリンク

Category Archives: サイドバー(sidebar)

Google Maps API v3 + 外部XMLファイル + サイドバー(sidebar)の復習

Google Maps API v3 + サイドバー(sidebar, marker list)をクリックしてインフォウィンドウ(infowindow)を表示させる」の記事が良くわからないとのコメントを頂いたので再度ポイントを復習してみます。

 

 

この地図は、外部に用意したxmlファイルからデータを引っ張ってアイコンを表示させるもの。ただし、xmlファイル「http://waox.main.jp/news/maps/googlemapsapi/example/kouen-demo.php」は、MySQL+phpで作成しているのでデータベースを利用していない場合には、テキストエディタで作成すれば良し。gmarker.xmlというファイル名にしてあります。サンプルは、コチラ「xmlファイルサンプル」。

②続いてdownloadxml.js の最新ファイルは、http://code.google.com/p/frisaporceddhu/source/browse/trunk/js/?r=44にあります。downloadxml.jsをダウンロードしてご自分のサーバにアップ

③最後に上記①のxmlファイル「http://waox.main.jp/news/maps/googlemapsapi/example/gmarker.xml」をご自分のPCに保存後、自分のサーバにアップロード。その後、下記の赤字の部分だけを自分のサーバURLに書き換えればOKです。これで動くはずですが・・・・。

Read more »

ズームレベルに連動しマーカー収得用の半径距離(km)を自動変更して、地図のアイコン表示範囲内(Viewport)に合わせてみる+サイドバー

◆ Google Maps API v3 /ズームレベルに連動しマーカー収得用の半径指定(km)を自動変更させる。

以前に、データベースから地図の中心より半径(km)を指定した距離範囲のマーカー(アイコン)を表示するサンプルデモを作成してみた。

これらは、ズームレベルの変更(zoom_changedイベント)があってもデータベースからは、マーカーを読み込ませないものにした、iPhone(アイフォン)やスマートフォン用の地図の場合、何度もMySQLと通信させるのは、スムースでないためだ。

しかしながら、PC用地図の場合、地図に表示されている範囲に合わせて、マーカーを表示させるようにした方が使用感が良いことに気がついた(・・・というかいちいち半径なんか指定するのは面倒)。

それであれば・・・・是非にもチャレンジしたかったのがgoogle先生のViewport Marker Mnagement、これは地図に表示されている範囲のマーカーだけを表示すテクニック、getBoundsで地図境界を取り出してデータベースから境界無いのマーカだけをひっぱってくるのだが、ここで地図レベル広域にしたら全部の数千個のマーカーが表示されてしまうではないか・・・・・・というかブラウザが固まるな。

では、広域になったらマーカーを表示させないか、またはMarkerclustererを使ったクラスタリング処理に切り替えるか・・・・・。

今回は、そこまで試す時間的余裕もないので、それなら、ズームレベルに併せて半径距離を自動で変更させてみることにしてみよう。

Read more »

データベースから地図の中心座標より半径(km)を指定した距離範囲のマーカー(アイコン)を表示するサンプルデモ完成

データベースから地図の中心より半径(km)を指定した距離範囲のマーカー(アイコン)を表示するphp+MySQL(その4)

◆ Google Maps API v3 /データベースから地図の中心より半径(km)を指定した距離範囲のマーカー(アイコン)を表示する

(1)マーカーを読み出すイベント

無事に地図を動かす度にマーカーを読み出すことに成功しましたが、データベースからマーカーを読み出すのにベストな地図の状態変化イベントは、dragendと決め付けました。

しかしながら、dragendの場合、少し問題があって、地図が最初に表示されたときにマーカーを読み込めません。地図が表示された時にイベントが発生しないことが判ります。地図をドラッグして初めてイベントが発生します(デモ)。

一方、idleイベントは、地図を読み込んだ直後でもイベントが発生しますので、これなら地図表示と同時にマーカーを表示できますが、その後、ズームでもイベントが発生してしまいますので、少しマーカーの読み込むが頻繁すぎる感じがあります。iPhone(アイフォン)用に転用しようと考えていますので、出来るだけデータベースとの通信間隔を少なくしたいものです。 そこで、projection_changed eventsを使います。 Read more »

event Listenerイベントリスナーで地図(マップ)イベントによりデータベースから都度マーカーを読み込むphp+MySQL

データベースから地図の中心より半径(km)を指定した距離範囲のマーカー(アイコン)を表示するphp+MySQL(その3)

◆ Google Maps API v3 / addListener() イベント ハンドラでデータベースから都度マーカーを読み込む。

さて、地図が動いたらというイベントをマーカーの検索functionへ渡してデータベースから読み込むのですが、その前に、データベースから引っ張ってくる変数を追加。アイコンのイメージを追加・・・等。肉付けしていきます。

最後に、地図に何らかの状態変化イベントが発生したら、地図の中心から入力したkmの範囲のマーカー(アイコン)を再表示させることにします。

イベント通知の登録は、addListener() イベント ハンドラを使用して行うと、Google先生のこのページ「Google Maps JavaScript API V3 のイベント」に書いてあります。

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 »

スポンサードリンク