地図の表示領域にあるマーカーだけを動的に読み込んで表示
今回は、動的に地点データを読み込みんでマーカーを表示し、地図とは別に地点データをリストを表示します。
前回はすべてのデータを読み込んでいましたが、今回は表示領域にあるデータだけを読み込みます。
そのため、今回からやっと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);
実際に地図を最初に開いた場合には、以下の表示となります。
そして、1つマーカーを表示されないようにスクロールすると、マーカーも地点名も2つになります。
完全なソースは、githubにあります。
https://github.com/pinoyuki/Sample-of-study/tree/master/GoogleMap/Sample5