前提・実現したいこと
google maps apiとクラアスタリング機能を使ってマップを表示させたいと思っています。
座標値などの情報はJSONファイルから出力したいのですが、表示されず苦戦しております。
ローカルでの配列だとうまくいきます。
発生している問題・エラーメッセージ
地図は表示されるのですがマーカーが表示されません。 Consoleでも赤字でのエラーはありません。
該当のソースコード
script type="text/javascript"> var map; var markers = []; var infowindow = new google.maps.InfoWindow(); var locations = [ [東京,35.681498, 139.767062], [神奈川,35.471219, 139.627371] ]; function initialize() { geocoder = new google.maps.Geocoder(); var center = new google.maps.LatLng(35.671752,139.764308); map = new google.maps.Map(document.getElementById('map'), { zoom: 12, center: center, mapTypeId: google.maps.MapTypeId.ROADMAP }); markMultiple(); } function markMultiple(){ var data = new Array(); $.getJSON('JSONファイル', function(data) { for( var i in data){ for( var j in data[i] ){ var latLng = new google.maps.LatLng(data[i]["map_latitude"], data[i]["map_longitude"]); var content = data[i]["name"] + ':' + data[i]["map_latitude"] + ',' + data[i]["map_longitude"]; markMap(latLng, content); } } }); // for (var i = 0; i < locations.length; i++) { // var loc = locations[i]; // var latLng = new google.maps.LatLng(loc[1],loc[2]); // var content = loc[0] + ":" + loc[1] + "," + loc[2]; // markMap(latLng, content); // } var markerCluster = new MarkerClusterer(map, markers); } function markMap(position, content){ var marker = new google.maps.Marker({ position: position, icon: 'img/map_icon_w.png' }); google.maps.event.addListener(marker, 'click', function() { infowindow.setContent(content); infowindow.open(map, marker); }); markers.push(marker); } google.maps.event.addDomListener(window, 'load', initialize); </script>
上記のコメントアウトしてあるfor文、var locations〜はローカル配列なのですが、こちらでは問題なく表示されます。
jsonファイルは下記のような構造になっています。
[ { "id": "1", "name": "東京", "map_latitude": 35.681498, "map_longitude": 139.767062 }, { "id": "2", "name": "神奈川", "map_latitude": 35.471219, "map_longitude": 139.627371 } ]
クラスタリング&JSONの組み合わせは検索をしてもなかなか出て来ず、教えていただけるとありがたいです。
どうぞよろしくお願いいたします。
回答3件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2018/07/19 04:34