スポンサードリンク

Category Archives: Google Maps API v3 サンプル

ズームレベルに連動しマーカー収得用の半径距離(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 »

マップオブジェクトの状態変化イベント及びマウスイベントを試す。デモのサンプル地図/Map Events Demo

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

◆ Google Maps API v3 / マップオブジェクトの状態変化イベント及びマウスイベントを試す。デモのサンプル地図

マーカーが多く増えてきたので、Google先生のViewport Marker Management(地図に表示されている範囲のマーカーだけを表示させる)なるものに挑戦しようと他webで紹介されていたAjax案を試していて気がついた。地図が広域になれば、マーカーが増えすぎて、クラスタリング処理でもしないと重くなるのね・・・・・はぁっ当然ですな。

MarkerClusererと組み合わせることを考えたが、このクラスタリング方法も広域にすると個々のアイコンが見えなくなってしまう。

希望のサイト製作には不向きだなと考えていたら、地図の中心から半径(km)の距離範囲のマーカーをデータベースから取り出すSQLがありました。

これを使っていきます。

Read more »

マップイベント projection_changedとは? tilesloadedとbounds_changedとcenter_changedのイベント発生の違いとは?

◆ Google Maps API v3 / マップオブジェクトの状態変化イベントtilesloadedとprojection_changedとは?

マップイベント projection_changedの違いが良くわからない。リファレンス読んでもprojection_changedの「このイベントは、投影が変更されると発生します。」とは?ナンなのだ?

それとtilesloadedとbounds_changedとcenter_changedのイベント発生の違いとは?

それならデモで試してみようかな。

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 / マーカーアニメーション Class

日本語のブラウザでアニメーションクラスを検索し、日本語版リファレンスへ飛んでも記載なし。英語版で確認してください。

google.maps.Animation class

現在、サポートされているmarkerのAnimations classは、”DROP”と”BOUNCE”

*  DROPは、マーカー表示の際に上から落ちてくるアニメーション。
* BOUNCEは、クリックイベントで飛び跳ねるアニメーションが可能。
面白いので、実装してみては?
Read more »

MarkerClusterer V3 クラスオプション gridSize指定/ Google Maps API v3

◆ MarkerClusterer V3 gridsizeオプション

MarkerClustererオプションの”gridSize”、MarkerClusterer V3のクラスリファレンスのページには記載が無いが、V2にはgridSizeのオプションある。V3は無効かと思ったが試したら機能するようだ。

Read more »

PHP+MySQL(XMLファイル生成)+Google Maps API V3/地図表示サンプル

とりあえずMySQLからデータを引っぱって表示させてみた。 せっかくなので、Googelコードを試す。参照ページは「Google マップと PHP/MySQL を使用」。このページ、以前はV2だったが、V3用に変わっていた。下記サンプル地図の表示マーカー数は、172マーカー。ちと重いかな。 iPhone(アイフォン)でサンプル地図をWi-Fiでなく3G回線で読み込んでみたが、まあ動くでないの。Google Maps API V3のスマートフォン対応恐るべし。次回は、MarkerClusterer+PHP+MySQL(XMLファイル生成)+Google Maps API V3を練習する予定。 ◆Script記述 Read more »

アイコン(マーカー)+インフォウィンドウ地図に表示/Google Maps JavaScript API V3

Google Maps API v3で地図を表示させたので、こんどはやはりマーカーとインフォウィンドウ(情報ウィンドウ)を表示させてみる。マーカとインフォウィンドウは最低限使います。

先生は、googleコードのインフォウィンドウの箇所。オーストラリアの中央にマーカーを表示し、マーカーをクリックすると情報ウィンドウが表示されるもの。

◆Google Maps V3 インフォウィンドウ

うーむ。気になったのは、インフォウィンドウの大きさ。

設定は、情報ウィンドウのサイズは自動調整だが、設定出来るようだ。なお、インフォウィンドウの縦・横スクロールを無効にするには、どうしたらいい?

InfoWindowOptions オブジェクトの仕様

Read more »

今度はアイコン(マーカー)を地図に表示+XMLファイルデータ読み込み/Google Maps JavaScript API V3

マーカー(アイコン)を表示させるのであれば、複数のマーカーを表示させたい。

v2でPHP+MySQLが使えないときに、XMLファイルから読み込んだ手を試してみる。

参照ページ;Google グルーディスカッションのサンプルより

◆Google Maps V3 XMLファイルからのマーカー+インフォウィンドウ読み込み

  1. Head内にutil.jsファイルを指定。ダウンロードは、GooglMaps のサンプルコードのページから。
  2. 名前や座標データを記述したXMLファイルを用意。サンプル(ソースを見るで確認

Read more »

2 / 3123

スポンサードリンク