スポンサードリンク

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

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

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

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

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

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

(その1)php+MySQL サンプルStore Locatorを試してみる。・・・の地図scriptへ、地図からidleイベントを受けたら、地図のセンターから、マーカーを検索(読み出し)するようにaddListener() へ、var center = map.getCenter(); searchLocationsNear(center); を追加します。

//初期表示用マーカー
		var ini = new google.maps.Marker(
		{
		position:new google.maps.LatLng(35.68407, 139.63623),
		map: map,
		title: '現在位置',  //タイトル位置
		icon: 'http://waox.main.jp/maps/icon/car2.png', //アイコン指定
		draggable: false,  //アイコンの移動の有効無効
		animation: google.maps.Animation.DROP
		}); 

//地図イベントを収得する
	    google.maps.event.addListener(map, 'idle', function()
        {
	var center = map.getCenter();
	searchLocationsNear(center);
	});

マーカーを読みこませる肝心のイベントですが、実際にサンプルを作成し、試してみました。

◆ Google Maps API v3 状態変化イベントでデータベースから都度マーカーを読み込むサンプル

結局、地図が動いたり、ズームされたりするイベントで、地図のマーカーを再表示させると、一番使えそうなのは、idleイベントでした。他のイベントでは、イベント発生間隔が短すぎなのでしょうか。

clickイベントは、iPhone(アイフォン)用地図に使えそうです。要は画面をワンタッチしたらマーカーを読み込ませる・・・という使い方です。

dragendイベントも捨てがたい。ズーム等でイベントが発生しないので、これも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="">