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

スポンサードリンク

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

Posted by 管理人 on 2011年1月10日 Leave a comment (1) Go to comments

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

（その1）php+MySQL サンプルStore Locatorを試してみる。
（その2）マップオブジェクトの状態変化イベント及びマウスイベントを試す。デモのサンプル地図／Map Events Demo
（その3）addListener() イベントハンドラで地図（マップ）イベントによりデータベースから都度マーカーを読み込むphp+MySQL
（その4）データベースから地図の中心より半径（km）を指定した距離範囲のマーカー（アイコン）を表示するサンプルデモ完成
iPhone（アイフォン）用に作り変えたサンプル

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

（1）マーカーを読み出すイベント

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

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

一方、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);//◆クリックしたインフォウィンドウを地図の中心に移動する。
	});