スポンサードリンク

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

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

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

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

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

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

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

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

元にする地図のソースは、google先生のstoreLocater(詳しくはコチラ

(1)ズームレベルを読み出して、半径距離を指定する方法の検討

地図からズームレベルを読み出して、ぞのズームレベルに対して、半径距離を指定する方法を先ずは試してみる。表示させる地図は、出来るだけ正方形がいいですな。

ズームレベルが15の場合、データベースから読み込む半径を例えば5kmとかに指定したい。

ズームレベルを得る方法は、getZoom(詳しくはコチラ)、これで得た変数zoomをif文とかで切り替えればいいかと。考えたif文のscriptは、次のようなもの。zoomレベルによって半径を指定する変数viewを得て、viewをvar radiusに渡してやる。 zoomは13の場合、マーカーを表示させる半径距離を5.5kmにする。 switch文の方がいいか?

var zoom = map.getZoom(); zoomlevel.innerHTML = '現在のズームレベルは、「 ' + zoom + ' 」です。';   if (zoom >= 1 && zoom <= 8) {var view = '0';}   else if(zoom ==9){var view = '85';}   else if(zoom ==10){var view = '43';}   else if(zoom ==11){var view = '21.6';}   else if(zoom ==12){var view = '12.3';}   else if(zoom ==13){var view = '5.5';}   else if(zoom ==14){var view = '2.8';}   else if(zoom ==15){var view = '1.3';}   else if(zoom ==16){var view = '0.65';}   else if(zoom ==17){var view = '0.34';}   else if(zoom ==18){var view = '0.16';}   else if(zoom ==19){var view = '0.09';}   else if(zoom ==20){var view = '0.05';}   else {var view = '0';} var radius = view; 

(2)マップイベントの処理

上記if文が動作するように、地図にズームレベルに変更があった時のイベントハンドラを追加。

	google.maps.event.addListener(map, 'zoom_changed', function() //◆地図のズームレベル変更時
	{
	center = map.getCenter();
	searchLocationsNear(center);
	});

◆ Google Maps API v3 ズームレベルに連動しマーカー収得用の半径距離(km)を自動変更するサンプルデモ

出来上がったマップは次のとおり、気になるのは、地図表示範囲内に収まるように各ズームレベルにあった半径にしておかないと、サイドバーに地図に表示されていないマーカーリストが表示されてしまいます。 なお、ズームレベルが広域になると読み込みが遅くなるので、ズームレベル1~8の場合、マーカーを読み込まないように半径を0kmにしてみました。 <問題点> iPhone(アイフォン)用には、ズームの度にマーカーを読み込ませるのは、ちと辛いかと。

そこで、同じマーカーを読み込まないテクニックを使い、出来るだけスムースにiPhone(アイフォン)で使えるようにしてみました。
関連記事は次の2つを参照されてください。
  1. 同じマーカー(アイコン)のデータを読み込まないようにして地図表示を高速化する方法
  2. 現在地からの目的地のアイコンをクリックしてルート検索&距離取得
完成したiPhone(アイフォン)などのスマートフォンで使えそうなデモ

◆Google Maps JavaScript API V3

スポンサードリンク

Related Posts

Leave a Comment


NOTE - You can use these HTML tags and attributes:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <img localsrc="" alt="">