スポンサードリンク

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

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

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

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

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

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

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

	google.maps.event.addListener(map, 'projection_changed', function() //◆地図の初期表示が完了した時点
	{
	center = map.getCenter();
	searchLocationsNear(center);
	});

	google.maps.event.addListener(map, 'dragend', function() //◆地図の移動(ドラッグ)をやめた時
	{
	center = map.getCenter();
	searchLocationsNear(center);
	});

(2)インフォウィンドウ(infowindow)の処理

storelocaterのサンプルそのままでは、地図のデータを読み出すたびにインフォウィンドウをcloseするscriptが働くようになっていますので、function clearLocations() 内の、infoWindow.close();を削除します。

idle イベントを使う場合、削除しておかないと、例えば、このデモでインフォウィンドウをクリックすると地図が少し移動しますのでイベントが発生し、クローズされてしまいます。

function clearLocations()
{
//infoWindow.close();
	for (var i = 0; i < markers.length; i++)
	{
	markers[i].setMap(null);
	}
	markers.length = 0;

	locationSelect.innerHTML = "";
	var option = document.createElement("option");
	option.value = "none";
	option.innerHTML = "マーカーのリスト表示:";
	locationSelect.appendChild(option);
}

(3)住所のinputフォームの削除

住所inputフォームと検索フォームは不要なので削除。下記のfunction searchLocations()全部を削除。

function searchLocations()

{
var input = document.getElementById("input").value;
var geocoder = new google.maps.Geocoder();
	geocoder.geocode({address: input}, function(results, status)
	{
		if (status == google.maps.GeocoderStatus.OK)
		{
		searchLocationsNear(results[0].geometry.location);
		}
		else
		{
		alert(input + ' not found');
		}
     	});
}

(4)マーカークリック時にインフォウィンドウ(infowindow)を地図の中心に移動させる

マーカーをクリックして、インフォウィンドウを表示させるとき、見やすいように地図の中心に移動させることにします。map.setCenter(latlng);でもいいのですが、アニメーションぽくスムースに移動させるようmap.panTo(latlng);を使います。

	google.maps.event.addListener(marker, 'click', function()
	{
	infoWindow.setContent(html);
	infoWindow.open(map, marker);
	map.panTo(latlng);//◆クリックしたインフォウィンドウを地図の中心に移動する。
	});

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

出来上がったマップは、そこそこ動きます。これでマーカーが数千~1万点以上に増えても、何とか処理できそうです。

<さらなる改善策>

1.問題というか、より良くするための手段として、iPhone(アイフォン)用には、一度読み込んだマーカーを消さずにそのまま残しておきたいと・・・・・・配列に重複したマーカーがある場合、削除すればいいのか?(解決しました /サンプル(ブラウザはChomeで))

2.ズームレベルに併せて、検索範囲を絞る方法を考えたく。例えば、ズーム10なら検索半径を20kmとか、ズーム18の場合は検索半径を500mにするとか・・・・出来そうですね。(試してみました。) 今回は、ココまで。

 

◆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="">