前の質問でデータベースから絞り込んで、マップにピンを表示するところまではできました。
ただ、ループが拾えていないようです。どこが間違っているのでしょうか?
######コード
参考サイト
javascript
1/////////////////////////////////////////////////////////////////////// 2// 変数設定 3/////////////////////////////////////////////////////////////////////// 4var Yucho = { 5 map:{}, 6 markerArr:[], 7 rectangleArrLatLng:[], 8 rectangleArrObj:[], 9 rectangleArrData:[], 10 gridRow:10, 11 gridCol:10, 12 defLat:35.685842, 13 defLng:139.757850, 14 defZoom:10, 15 bounds:{}, 16 jsonUrl:'ajaxtestmaps/testsearch.json', 17 jsonData:[], 18 boundsData:{}, 19}; 20 21/////////////////////////////////////////////////////////////////////// 22// 初期化 23/////////////////////////////////////////////////////////////////////// 24Yucho.initMap = function(){ 25 26 // googleMaps 初期設定 27 Yucho.gMapInit(); 28 29 // googleMaps アイドル設定 30 Yucho.gMapSetIdle(); 31 32}; 33 34/////////////////////////////////////////////////////////////////////// 35// googleMaps 初期設定 36/////////////////////////////////////////////////////////////////////// 37Yucho.gMapInit = function(){ 38 Yucho.map = new google.maps.Map(document.getElementById('map'), { 39 center: { 40 lat: Yucho.defLat, 41 lng: Yucho.defLng 42 }, 43 zoom: Yucho.defZoom 44 }); 45}; 46 47/////////////////////////////////////////////////////////////////////// 48// JSON読み込み 49/////////////////////////////////////////////////////////////////////// 50Yucho.getJson = function(){ 51 52 $.ajax({ 53 type: "GET", 54 url: '/ajaxtestmaps/testsearch.json' + '?min_lat=' + Yucho.swLat + '&max_lat=' + Yucho.neLat + '&min_lng=' + Yucho.swLng + '&max_lng=' + Yucho.neLng, 55 dataType: "json", 56 }).done(function(jsonDataList){ 57 Yucho.jsonData = jsonDataList; 58 $('#status_all').html(Yucho.jsonData.jsonDataList.length); 59 }); 60 61 // マーカー削除 62 Yucho.markerArr.forEach(function(marker, idx) { 63 marker.setMap(null); 64 }); 65 66 // マーカー作成 67 Yucho.createMarker(); 68 69}; 70 71/////////////////////////////////////////////////////////////////////// 72// googleMaps アイドル設定 73/////////////////////////////////////////////////////////////////////// 74 75Yucho.gMapSetIdle = function(){ 76 google.maps.event.addListener(Yucho.map, 'idle', function(){ 77 Yucho.refleshMap(); 78 }); 79}; 80 81/////////////////////////////////////////////////////////////////////// 82// MAPリフレッシュ 83//アイドルされた時、Jsonを再読み込み 84/////////////////////////////////////////////////////////////////////// 85Yucho.refleshMap = function() { 86 87 // マップサイズ取得 88 Yucho.getMapSize(); 89 90 // json読み込み 91 Yucho.getJson(); 92 93}; 94 95/////////////////////////////////////////////////////////////////////// 96// マップサイズ取得 97//getSouthWest():表示領域の南西(左下)の頂点の地理座標を返す 98//getNorthEast():領域の北東(右上)の頂点の地理座標を返す 99/////////////////////////////////////////////////////////////////////// 100Yucho.getMapSize = function() { 101 Yucho.bounds = Yucho.map.getBounds(); 102 Yucho.neLatLng = Yucho.bounds.getNorthEast(); 103 Yucho.neLat = Yucho.neLatLng.lat(); 104 Yucho.neLng = Yucho.neLatLng.lng(); 105 Yucho.swLatLng = Yucho.bounds.getSouthWest(); 106 Yucho.swLat = Yucho.swLatLng.lat(); 107 Yucho.swLng = Yucho.swLatLng.lng(); 108}; 109 110/////////////////////////////////////////////////////////////////////// 111// マーカー作成 112/////////////////////////////////////////////////////////////////////// 113Yucho.createMarker = function() { 114 var infoWindow; 115 if(Array.isArray(Yucho.jsonData.jsonDataList)){ 116 console.log(Yucho.jsonData.jsonDataList.length); 117 Yucho.jsonData.jsonDataList.forEach(function (place) { 118 var latlng = new google.maps.LatLng(place.lat,place.lng); 119 var marker = new google.maps.Marker({ 120 position: latlng, 121 map: Yucho.map, 122 flat: true, 123 }); 124 Yucho.markerArr.push(marker); 125 google.maps.event.addListener(marker, 'click', function () {//情報ウィンドウ 126 if (!infoWindow) { 127 infoWindow = new google.maps.InfoWindow(); 128 } 129 infoWindow.setContent('会社名' + '<br />' + '住所' + '<br />' + '緯度:' + place.lat + '<br />' + '軽度:' + place.lng); 130 infoWindow.open(map, marker); 131 }); 132 }); 133 } 134}; 135 136/////////////////////////////////////////////////////////////////////// 137// event 138// window.onload HTML読み込みが完了してからから実行される 139/////////////////////////////////////////////////////////////////////// 140 141window.onload = Yucho.initMap;
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2017/03/18 06:56 編集
2017/03/18 09:49
2017/03/18 09:56
2017/03/18 10:03
2017/03/18 10:09
2017/03/18 10:15
2017/03/18 10:15
2017/03/18 10:16
2017/03/18 10:21 編集
2017/03/18 10:40 編集
2017/03/18 10:49