28168


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

javascript

[code]

      $(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);
      });
      }
    }
    
[/code]

mapintel.json

[code]

    {"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":"ここに新御茶ノ水駅がある"}
    ]}
    
[/code]


CC BY-SA 3.0
2016-08-09T13:55:06.793
28161
2016-08-10T06:04:43.790
13526
question
javascript json google-maps
開かれた情報ウィンドウが読み込んだjsonファイルの一行目しか表示されない


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

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

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

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

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

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

**解決策1**

[code]

      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);
[/code]

[code]

      <script type="text/javascript" src="http://maps.google.com/maps/api/js"></script>
    
    <div id="map" style="width: 740px; height: 400px;"></div>
[/code]

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

[code]

    let marker=new google.maps.Marker({ ...
    ...
    let infoWindow = new google.maps.InfoWindow({
    
[/code]

[code]

      
      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);
[/code]

[code]

      <script type="text/javascript" src="http://maps.google.com/maps/api/js"></script>
    
    <div id="map" style="width: 740px; height: 400px;"></div>
[/code]


CC BY-SA 3.0
2016-08-10T06:04:43.790
28168
2016-08-10T06:04:43.790
12256
28161
answer