Let's make something

PHPやJavaScriptを学びながら、サイトを作ってみようと思う今日この頃

地図の表示領域にあるマーカーだけを動的に読み込んで表示

今回は、動的に地点データを読み込みんでマーカーを表示し、地図とは別に地点データをリストを表示します。
前回はすべてのデータを読み込んでいましたが、今回は表示領域にあるデータだけを読み込みます。
そのため、今回からやっとPHPも使います。

今までは、ロードした際のみにマーカーを読み込んでいましたが、今回はスクロールやズームが終わったときにマーカーをリフレッシュする必要があります。


そのため、GoogleMapのオブジェクトを生成した後に、ズームや移動の後に地図がidle状態になると発生するイベント'idle'のリスナーを追加し、
このリスナー内でマーカーの再読み込みを行います。

イベントは、'idle'以外にも色々ありますが、ここにまとまっています。

  // 地図変更時のリスナーの追加
  google.maps.event.addListener(gmap, 'idle', function(){
    refleshMarker();
  })


マーカーのリフレッシュは、地点の表示とマーカー表示を削除します。
その後に、地図の表示範囲(北東・南西の緯度経度)を取得し、マーカー取得のphpを呼び出します。
そして、戻ってきた地点の表示とマーカー表示を表示します。

  /**
   * マーカー削除
   */
  var clearMarkerData = function(){
    var i;
    //表示中のマーカーがあれば削除
    if(markerArray.length > 0){
      //マーカー削除
      for ( i = 0; i <  markerArray.length; i++) {
        markerArray[i].setMap();
      }
      markerArray.length = 0;
    }
  }
    
  /**
   * マーカーのリフレッシュ 
   */
  var refleshMarker = function(){
    //リストの内容を削除
    $('#marker_list > ol').empty();
  
    //マーカー削除
    clearMarkerData();
    
    //地図の表示範囲を取得
    var bounds = gmap.getBounds();
    var northEastLatLng = bounds.getNorthEast();
    var southWestLatLng = bounds.getSouthWest();

    //jsonファイルの取得
    $.ajax({
      url: 'php/get_marker.php?neLat='+northEastLatLng.lat()+'&neLng='+northEastLatLng.lng()+'&swLat='+southWestLatLng.lat()+'&swLng='+southWestLatLng.lng(),
      type: 'GET',
      dataType: 'json',
      timeout: 1000,
      error: function(){
        alert("地図データの読み込みに失敗しました");
      },
      success: function(json){
        //帰ってきた地点の数だけループ
        var markerData = new Array();
        $.each(json.points,function(){
          markerData.push({
            position: new google.maps.LatLng(this.lat,this.lng), 
            title: this.title,
            content:this.content
          });
        });
      
        // マーカーデータをセット
        if(markerArray){
          setMarkerData(markerData);
        }      
      }
    });    
  }

phpでは、引数で指定された北東と南西の緯度・経度内に存在するデータのみをJSON形式で返却します。

<?php

//範囲データ取得
$neLat = $_GET["neLat"];
$neLng = $_GET["neLng"];
$swLat = $_GET["swLat"];
$swLng = $_GET["swLng"];


$json = file_get_contents('../json/points.json', true);

if ($json == false) {
  return;
}


$jsonData = json_decode($json);

$points = $jsonData->{'points'};
$result = new stdClass();
$result->points = array();

foreach ($points as &$point) {
  if ($point->{"lat"} < $neLat &&
          $point->{"lat"} > $swLat &&
          $point->{"lng"} < $neLng &&
          $point->{"lng"} > $swLng) {
    $result->points[] = $point;
  }
}
echo json_encode($result);

実際に地図を最初に開いた場合には、以下の表示となります。
f:id:pinoyuki:20120403002101p:plain

そして、1つマーカーを表示されないようにスクロールすると、マーカーも地点名も2つになります。
f:id:pinoyuki:20120403002526p:plain


完全なソースは、githubにあります。
https://github.com/pinoyuki/Sample-of-study/tree/master/GoogleMap/Sample5