GoogleMapAPIで表示領域のみマーカーを表示

参考記事
短形の中にピンを1つ表示しています。

それをカスタマイズして
地図が表示されている領域のみピンを表示したいのです。
（つまり、短形の中に1つではなく地図表示領域にあるピンは全て表示）

どのように実現できますでしょうか？

######現状のコード

Javascript
1///////////////////////////////////////////////////////////////////////
2// 変数設定
3///////////////////////////////////////////////////////////////////////
4var Yucho = {
5    map:{},
6    markerArr:[],
7    rectangleArrLatLng:[],
8    rectangleArrObj:[],
9    rectangleArrData:[],
10    gridRow:10,
11    gridCol:10,
12    defLat:43.0686606,
13    defLng:141.3507552,
14    defZoom:15,
15    bounds:{},
16    boundsLen:{},
17    neLatLng:{},
18    neLat:{},
19    neLng:{},
20    swLatLng:{},
21    swLat:{},
22    swLng:{},
23    jsonUrl:'/ajaxtestmaps/testsearch.json',
24    jsonData:{},
25    boundsData:{},
26};
27 
28///////////////////////////////////////////////////////////////////////
29// 初期化
30///////////////////////////////////////////////////////////////////////
31Yucho.initMap = function(){
32     
33    // googleMaps 初期設定
34    Yucho.gMapInit();
35	
36	// json読み込み
37    Yucho.getJson();
38  
39};
40 
41///////////////////////////////////////////////////////////////////////
42// googleMaps 初期設定
43///////////////////////////////////////////////////////////////////////
44Yucho.gMapInit = function(){
45    Yucho.map = new google.maps.Map(document.getElementById('map'), {
46        center: {lat: Yucho.defLat, lng: Yucho.defLng},
47        zoom: Yucho.defZoom
48    });
49};
50 
51///////////////////////////////////////////////////////////////////////
52// JSON読み込み
53///////////////////////////////////////////////////////////////////////
54Yucho.getJson = function(){
55	 // マップサイズ取得
56    Yucho.getMapSize();
57    $.ajax({
58        type: "GET",
59        url: Yucho.jsonUrl + '?min_lat=' + Yucho.swLatLng.lat + '&max_lat=' + Yucho.neLatLng.lat + '&min_lng=' + Yucho.swLatLng.lng + '&max_lng=' + Yucho.neLatLng.lng,
60        dataType: "json",
61    }).done(function(jsonDataList){
62        Yucho.jsonData = jsonDataList;
63        //$('#status_all').html(Yucho.jsonData.length);
64         
65        // googleMaps アイドル設定
66        Yucho.gMapSetIdle();
67    });
68};
69 
70///////////////////////////////////////////////////////////////////////
71// googleMaps アイドル設定
72///////////////////////////////////////////////////////////////////////
73Yucho.gMapSetIdle = function(){
74    google.maps.event.addListener(Yucho.map, 'idle', function(){
75        Yucho.refleshMap();
76    });
77};
78 
79///////////////////////////////////////////////////////////////////////
80// MAPリフレッシュ
81///////////////////////////////////////////////////////////////////////
82Yucho.refleshMap = function() {
83	     
84    // マップサイズ取得
85    Yucho.getMapSize();
86     
87    // マーカー削除
88    Yucho.markerArr.forEach(function(marker, idx) {
89        marker.setMap(null);
90    });
91     
92    // マーカー作成
93    Yucho.createMarker();
94          
95};
96 
97///////////////////////////////////////////////////////////////////////
98// マップサイズ取得
99//getSouthWest()：表示領域の南西（左下）の頂点の地理座標を返す
100//getNorthEast()：領域の北東（右上）の頂点の地理座標を返す
101///////////////////////////////////////////////////////////////////////
102Yucho.getMapSize = function() {
103    Yucho.boundsLen = 0;
104    Yucho.bounds = Yucho.map.getBounds();
105    Yucho.neLatLng = Yucho.bounds.getNorthEast();
106    Yucho.neLat = Yucho.neLatLng.lat();
107    Yucho.neLng = Yucho.neLatLng.lng();
108    Yucho.swLatLng = Yucho.bounds.getSouthWest();
109    Yucho.swLat = Yucho.swLatLng.lat();
110    Yucho.swLng = Yucho.swLatLng.lng();
111    Yucho.latDiff = (Yucho.neLat-Yucho.swLat)/Yucho.gridRow;
112    Yucho.lngDiff = (Yucho.neLng-Yucho.swLng)/Yucho.gridCol;
113};
114 
115///////////////////////////////////////////////////////////////////////
116// マーカー作成
117///////////////////////////////////////////////////////////////////////
118Yucho.createMarker = function() {
119	console.log(Yucho.jsonData.jsonDataList);
120    Yucho.jsonData.jsonDataList.forEach(function (place) {
121                var latlng = new google.maps.LatLng(place.lat,place.lan);
122                var marker = new google.maps.Marker({
123                    position: latlng,
124                    map: Yucho.map,
125                    flat: true,
126                });
127                Yucho.markerArr.push(marker);
128    });
129};
130 
131///////////////////////////////////////////////////////////////////////
132// event
133///////////////////////////////////////////////////////////////////////
134 
135window.onload = Yucho.initMap;

行動規範の内容に同意します

回答1件

ベストアンサー

類似質問
sqlの検索結果を現在表示されている範囲内のマーカーだけリストと共に表示する

投稿2017/03/17 09:35

退会済みユーザー

総合スコア0

ssk

2017/03/17 15:26 編集

回答ありがとうございます。類似質問を参考にコーディングしてみました。 url: Yucho.jsonUrl + '?min_lat=' + Yucho.swLatLng.lat + '&max_lat=' + Yucho.neLatLng.lat + '&min_lng=' + Yucho.swLatLng.lng + '&max_lng=' + Yucho.neLatLng.lng, のYucho.swLatLng.latなどの値が取れず、ただいま奮闘しております。

退会済みユーザー

2017/03/17 15:28

デバッグはご自身で。それができないのなら、サンプルコードをそのまま使ってください。

ssk

2017/03/17 15:44

ありがとうございました。

行動規範の内容に同意します