お世話になります。
現在jsonファイルのデータをグーグルマップに表示して、さらにマップに表示されている情報の一覧をテーブルで表示したいのですがうまくいかず困っています。
テーブルに表示したい物は、マップの吹き出しと同じような感じで「画像」「所在置」「店舗名」を想定しています。
ご教授いただければ幸いです。
以下に作成中のコードを示します
javascript
1 2var openInfoWindow = null; 3 4$(function initialize() { 5 var data = new Array(); 6 $.getJSON("json/array.json" , function(data) { 7 for( var i in data){ 8 for( var j in data[i] ){ 9 if(data[i]["C"] == 1){ // 表示・非表示フラグを判定 10 if(data[i]["B"] == 20){ 11 var myMarker = new google.maps.Marker({ 12 position: new google.maps.LatLng(data[i]["M"], data[i]["N"]), 13 map: myMap, 14 icon: new google.maps.MarkerImage("icon/home_" + data[i]["B"] + ".png") 15 }); 16 attachMessage(myMarker,"メッセージ : " + data[i]["J"] + '</br>' + "店舗名 : " + data[i]["D"] + '</br>' + "所在地 : " + data[i]["E"] + '</br>' + 17 '<a href="#" target="_blank">お問い合わせはこちら</a>' + '</br>' + 18 '<img src="images/' + data[i]["K"] + ".jpg" + '" height="150">' ); 19 } 20 } 21 } 22 } 23 }); 24}); 25 26 27function attachMessage(marker,msg) { 28 google.maps.event.addListener(marker, 'click', function() { 29 if (openInfoWindow) { 30 openInfoWindow.close(); 31 } 32 new google.maps.Geocoder().geocode({ 33 latLng: marker.getPosition() 34 }, function(result, status) { 35 if (status == google.maps.GeocoderStatus.OK) { 36 openInfoWindow = new google.maps.InfoWindow({ 37 content: msg 38 }); 39 openInfoWindow.open(marker.getMap(), marker); 40 } 41 }); 42 }); 43} 44 45var myMap = new google.maps.Map(document.getElementById('map'), { 46 zoom: 12, 47 center: new google.maps.LatLng(34.894000, 136.930437), 48 scrollwheel: false, 49 mapTypeId: google.maps.MapTypeId.ROADMAP 50}); 51 52 53/* スタイル付き地図 */ 54 var styleOptions = [ 55 { 56 "featureType": "poi", 57 "elementType": "labels.text", 58 "stylers": [ 59 { "visibility": "off" } 60 ] 61 } 62 ]; 63 64myMap.setOptions({styles: styleOptions}); 65
追記致します。
HTMLのテーブルは以下のコードのような構成を考えています。
その中にjsonから取得したデータを入れ込みたいのですがうまくいきません。
HTML
1<table class="tennpo" border="1"> 2<tr><td rowspan="2" class="outline"><a class="link" target="_blank" onclick="javascript:openWin(this.href);return false;" href="images/gaikann.jpg"><img width="85" src="images/model_photo_CLAIRYUUSAKI.jpg" alt="外観"></a></td><th colspan="2">店舗名</th><th class="btn"><a class="link" target="_blank" onclick="javascript:openWin(this.href);return false;" href="images/tennpo.jpg"></th></tr><tr><td class="address">所在地</td><td colspan="2"></td></tr> 3</table> 4コード
InfoWindowの中にテーブルを作りたいということですか? それとももしかして、Googleマップとはまた全然別にテーブルを作りたいということですか?
コメントありがとうございます。
>InfoWindowの中にテーブルを作りたいということですか?
→いえ、グーグルマップが表示されている下に別にマップに表示されている店舗の情報をテーブルで表示したいという感じです。
できればテーブルに表示されている店舗名をクリックするとマップのほうの吹き出しが表示されるといった機能も実装したいです。
今回の質問はまずjavascriptでのfor文でのテーブル作成とその中にあるデータを入れ込みたいということです。
説明不足かも知れませんがよろしくお願いします。
あと、質問文にドメインが書かれているので修正された方がいいと思います。アクセスをしたところ、物件名とか見えてしまいました。
ご指摘ありがとうございます。
お恥ずかしいです。
検証環境のため漏れても問題ない情報なのですが削除しました
回答3件
あなたの回答
tips
プレビュー