0

jsonファイルの位置情報とテキストを読み込み、それぞれのマーカーに情報ウィンドウにテキストを開かせるようにしていますが全てのlatとlngは読み込めてマーカーの配置できているみたいですが情報ウィンドウのtitleとtextはjson内の一行目しか読み込まれていないようです。他のマーカーをクリックするとjson内の一行目にあるデータの情報ウィンドウしか読み込まれない状態です。どういうことでしょうか?

javascript

  $(function(){
  //JSONファイル読み込み開始
   $.ajax({
   url:"mapintel.json",
   cache:false,
   dataType:"json",
    success:function(json){
    var data=jsonRequest(json);
    initialize(data);
    }
   });
  });

  // JSONファイル読み込みマーカーへデータ格納
  function jsonRequest(json){
   var data=[];
    if(json.Marker){
    var n=json.Marker.length;
    for(var i=0;i<n;i++){
     data.push(json.Marker[i]);
     }
   }
  return data;
  }


  function initialize(data){

  var opts={
    zoom: 16,
    center: new google.maps.LatLng(35.6954806, 139.76325010000005),
    mapTypeId: google.maps.MapTypeId.ROADMAP
       };
      var map = new google.maps.Map(document.getElementById("map"),opts);

  var i=data.length;
  while(i-- >0){
   var dat = data[i];
   var marker=new google.maps.Marker({
     position:new google.maps.LatLng(dat.lat,dat.lng),
     map:map
   });

   var infoWindow = new google.maps.InfoWindow({
     content:'<div class="infoWindow">'+
         '<h2>'+dat.title+'</h2>'+
         '<p>'+dat.text+'</p>'+
         '</div>'
   });

    google.maps.event.addListener(marker, 'click', function() {

    if (infoWindow) {
        infoWindow.close();
    }
      infoWindow.open(map, marker);
  });
  }
}

mapintel.json

{"Marker":[
{"title":"TAM 東京","lat":"35.6954806","lng":"139.76325010000005","text":"ここにTAM 東京がある"},
{"title":"小川町駅","lat":"35.6951212","lng":"139.76610649999998","text":"ここに小川町駅がある"},
{"title":"淡路町駅","lat":"35.69496","lng":"139.76746000000003","text":"ここに淡路町駅がある"},
{"title":"御茶ノ水駅","lat":"35.6993529","lng":"139.76526949999993","text":"ここに御茶ノ水駅がある"},
{"title":"神保町駅","lat":"35.695932","lng":"139.75762699999996","text":"ここに神保町駅がある"},
{"title":"新御茶ノ水駅","lat":"35.696932","lng":"139.76543200000003","text":"ここに新御茶ノ水駅がある"}
]}

1 件の回答 1

1

解凍させていただきます!

json内の一行目にあるデータの情報ウィンドウしか読み込まれない状態です。

google.maps.event.addListener(marker, 'click', function() {
  if (infoWindow) {
      infoWindow.close();
  }
  infoWindow.open(map, marker);
});

上記のclickイベント内で実行されるfunctionは、実行される際にはinfowindow最後のインスタンスを参照しているためにこのような状況となっています。

クロージャについては、以下のサイトが参考になりますっ
https://developer.mozilla.org/ja/docs/Web/JavaScript/Closures

以下にスニペットを2つ作ってみました。
※ajax部分は省いたため、若干変更しています。

解決策1

  console = null; // warningを表示しないようnullで(ry
  var currentInfoWindow = null;
  
  function createClickCallback(marker, infoWindow) {
    return function() {
      if (currentInfoWindow){
        currentInfoWindow.close();
      }
      infoWindow.open(marker.getMap(), marker);

      currentInfoWindow = infoWindow;
    };
  }

  function initialize(data){
    var opts = {
      zoom: 16,
      center: new google.maps.LatLng(35.6954806, 139.76325010000005),
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    var map = new google.maps.Map(document.getElementById("map"),opts);

    var i=data.length;
    while(i-- >0){
      var dat = data[i];
      var marker=new google.maps.Marker({
        position:new google.maps.LatLng(dat.lat,dat.lng),
        map:map
      });

      var infoWindow = new google.maps.InfoWindow({
         content:'<div class="infoWindow">'+
             '<h2>'+dat.title+'</h2>'+
             '<p>'+dat.text+'</p>'+
             '</div>'
      });

      google.maps.event.addListener(marker, 'click', createClickCallback(marker, infoWindow));
    }
  }

  var data = [
    {"title": "TAM 東京"     ,"lat": "35.6954806" ,"lng": "139.76325010000005" ,"text": "ここにTAM 東京がある"},
    {"title": "小川町駅"     ,"lat": "35.6951212" ,"lng": "139.76610649999998" ,"text": "ここに小川町駅がある"},
    {"title": "淡路町駅"     ,"lat": "35.69496"   ,"lng": "139.76746000000003" ,"text": "ここに淡路町駅がある"},
    {"title": "御茶ノ水駅"   ,"lat": "35.6993529" ,"lng": "139.76526949999993" ,"text": "ここに御茶ノ水駅がある"},
    {"title": "神保町駅"     ,"lat": "35.695932"  ,"lng": "139.75762699999996" ,"text": "ここに神保町駅がある"},
    {"title": "新御茶ノ水駅" ,"lat": "35.696932"  ,"lng": "139.76543200000003" ,"text": "ここに新御茶ノ水駅がある"}
  ];
  initialize(data);
  <script type="text/javascript" src="http://maps.google.com/maps/api/js"></script>

<div id="map" style="width: 740px; height: 400px;"></div>

解決策2
もしくは、markerinfoWindowの定義をブロック内の限定的スコープであるletに変えるとうまく動作します。

let marker=new google.maps.Marker({ ...
...
let infoWindow = new google.maps.InfoWindow({

  
  console = null; // warningを表示しないようnullで(ry

  var currentInfoWindow = null;
  function initialize(data){
    var opts = {
      zoom: 16,
      center: new google.maps.LatLng(35.6954806, 139.76325010000005),
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    var map = new google.maps.Map(document.getElementById("map"),opts);

    var i=data.length;
    while(i-- >0){
      var dat = data[i];
      let marker=new google.maps.Marker({
        position:new google.maps.LatLng(dat.lat,dat.lng),
        map:map
      });

      let infoWindow = new google.maps.InfoWindow({
         content:'<div class="infoWindow">'+
             '<h2>'+dat.title+'</h2>'+
             '<p>'+dat.text+'</p>'+
             '</div>'
      });

      google.maps.event.addListener(marker, 'click', function() {
        if (currentInfoWindow) {
            currentInfoWindow.close();
        }
        infoWindow.open(map, marker);
        currentInfoWindow = infoWindow;
      });
    }
  }

  var data = [
    {"title": "TAM 東京"     ,"lat": "35.6954806" ,"lng": "139.76325010000005" ,"text": "ここにTAM 東京がある"},
    {"title": "小川町駅"     ,"lat": "35.6951212" ,"lng": "139.76610649999998" ,"text": "ここに小川町駅がある"},
    {"title": "淡路町駅"     ,"lat": "35.69496"   ,"lng": "139.76746000000003" ,"text": "ここに淡路町駅がある"},
    {"title": "御茶ノ水駅"   ,"lat": "35.6993529" ,"lng": "139.76526949999993" ,"text": "ここに御茶ノ水駅がある"},
    {"title": "神保町駅"     ,"lat": "35.695932"  ,"lng": "139.75762699999996" ,"text": "ここに神保町駅がある"},
    {"title": "新御茶ノ水駅" ,"lat": "35.696932"  ,"lng": "139.76543200000003" ,"text": "ここに新御茶ノ水駅がある"}
  ];
  initialize(data);
  <script type="text/javascript" src="http://maps.google.com/maps/api/js"></script>

<div id="map" style="width: 740px; height: 400px;"></div>

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。