WordPressにGoogle Maps API V3！

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

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

◆ 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.event.addListener(map, ‘idle’, function()
• google.maps.event.addListener(map, ‘bounds_changed’, function()
• google.maps.event.addListener(map, ‘center_changed’, function()
• google.maps.event.addListener(map, ‘zoom_changed’, function()
• google.maps.event.addListener(map, ‘click’, function()
• google.maps.event.addListener(map, ‘dragend’, function()

◆Google Maps JavaScript API V3

• Google Maps API v3 目次に戻る

スポンサードリンク