google MAP API v3でDB連帯などもろもろできるかやってみた。

今回やりたいと思っていることは、DBにある駅情報をgooglemap上に表示することで、まぁー半径5km以内のデータだけ表示して、地図をドラッグ＆ズームサイズ変更により駅情報を表示させるようにすること。ついでにサイドバーに現在mapに表示している駅情報をリストで表示することを目標に作成しました！

■ 参考にしたページ

Creating a Store Locator with PHP, MySQL & Google Maps

ズーム範囲の固定

データベースから地図の中心座標より半径（km）を指定した距離範囲

最終的にはこのようになりました。

ちょっと電車のアイコンが分かり図らい感じになっていますね。まー気にしないでくださいね。

まず最初にgoogleのページにあるサンプルが非常に分かりやすいので、それをカスタマイズしていきます。

個人的にズームの範囲を固定したかったため、参照サイトの記述をそのまま追加。ズーム範囲を指定しました。

function load() {

 ～ 途中省略～

    //google map のズーム機能制限用
	google.maps.event.addListenerOnce(map, "projection_changed", function(){
      map.setMapTypeId(google.maps.MapTypeId.HYBRID);  //一瞬だけマップタイプを変更
      setZoomLimit(map, google.maps.MapTypeId.ROADMAP);
      setZoomLimit(map, google.maps.MapTypeId.HYBRID);
      setZoomLimit(map, google.maps.MapTypeId.SATELLITE);
      setZoomLimit(map, google.maps.MapTypeId.TERRAIN);
      map.setMapTypeId(google.maps.MapTypeId.ROADMAP);  //もとに戻す
    });
}
//ズーム範囲を固定関数
  function setZoomLimit(map, mapTypeId){
    //マップタイプIDを管理するレジストリを取得
    var mapTypeRegistry = map.mapTypes;
    //レジストリから現在のマップタイプIDのMapTypeを取得する
    var mapType = mapTypeRegistry.get(mapTypeId);
    //ズームレベルを設定する
    mapType.maxZoom = 20;  //SATELLITE・HYBRIDは機能しない
    mapType.minZoom = 13;
}

次にeventによって処理を分けるようにしていきます。

googlemapにいろいろevent関数が用意されているので、その中から、ドラッグが終了したとき（dragend）とズームを変えたとき（zoom_changed）を利用します。

function load() {

 ～ 途中省略～
 
    //google mapのズームが変更したとき発生するイベント
	google.maps.event.addListener(map, 'zoom_changed', function()
	{
	var center = map.getCenter();
	searchLocationsNear(center); //searchLocationsNear()は中心座標を取得して、phpでDBからデータを取得する関数
	});
	//google mapのドラッグ画終了したとき発生するイベント
	google.maps.event.addListener(map, 'dragend', function()
	{
	var center = map.getCenter();
	searchLocationsNear(center); 
	});
}

 いよいよ最後にサイドメニューを追加します。

searchLocationsNear()の中で、DBから取得したデータの配列をsidemarkersへ。createMarkerButton(sidemarkers);で作成します。

function createMarkerButton(marker) {
  //サイドバーにマーカ一覧を作る
  var ul = document.getElementById("marker_list");
  var li = document.createElement("li");
  var title = marker.getTitle();
  var line_name = marker.get('line_name');
  li.innerHTML = '<a href="javascript:;">'+title+'('+line_name+')</a>';
  ul.appendChild(li);
  
  //サイドバーがクリックされたら、マーカーを擬似クリック
  google.maps.event.addDomListener(li, "click", function(){
    google.maps.event.trigger(marker, "click");
  });
}

コレでだいたいOK。event発生時にmapに表示するマーカーとサイドメニューをクリアにすれば完成です。

今回のソースの完全版がほしい方はコメント下さい！なんて・・・