

GoogleMapで位置情報と情報ウィンドウの内容が入ったJSONデータに連動してマーカーをクリックすると情報ウィンドウが表示され、コンテンツ表示させるものを作成しているのですが作ったコードではマーカーが消滅しています。javascript内に位置情報を配列として入力したものは正しく動きました。ご教授お願いいたします。

javascript内に配列を入れたもの

[code]

    <html>
    <head>
      <meta charset="utf-8" />
      <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
      <link rel="stylesheet"href="http://code.jquery.com/mobile/1.4.0/jquery.mobile-1.4.0.min.css" />
      <script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
      <script src="http://code.jquery.com/mobile/1.4.0/jquery.mobile-1.4.0.min.js"></script>
      <script>
      var currentWindow = null ;
      function initialize() {
    
        var bodyHeight = $('body').height();
        $("#map").css('height',bodyHeight);
    
          var myOptions = {
              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"),myOptions);
          var markers = [
          ['TAM 東京', 35.6954806, 139.76325010000005,'コメントA'],
          ['小川町駅', 35.6951212, 139.76610649999998,'コメントB'],
          ['淡路町駅', 35.69496, 139.76746000000003,'コメントC'],
          ['御茶ノ水駅', 35.6993529, 139.76526949999993,'コメントD'],
          ['神保町駅', 35.695932, 139.75762699999996,'コメントE'],
          ['新御茶ノ水駅', 35.696932, 139.76543200000003,'コメントF']
          ];
          for (var i = 0; i < markers.length; i++) {
              var name = markers[i][0];
              var latlng = new google.maps.LatLng(markers[i][1],markers[i][2]);
              var comment = markers[i][3];
              createMarker(name, latlng, comment, map);
          }
      }
      function createMarker(name, latlng, comment, map) {
          var infoWindow = new google.maps.InfoWindow({
          });
          var marker = new google.maps.Marker({
              position: latlng,
              map: map
          });
          google.maps.event.addListener(marker, 'click', function() {
              if (currentWindow) {
                  currentWindow.close();
              }
              infoWindow.setContent(
                '<div class="infoWindow">'+
                '<h2>'+name+'</h2>'+
                '<p>'+comment+'</p>'+
                '</div>'
              );
              infoWindow.open(map, marker);
              currentWindow = infoWindow;
          });
      }
      google.maps.event.addDomListener(window, 'load', initialize);
    
      </script>
    </head>
    
    <body onload="initialize()">
      <div data-role="page" id="top">
       <div data-role="header">
        <h1>DEMO</h1>
       </div>
    <div role="main" class="ui-content">
    <a href="#sub" data-rel="dialog" data-transition="slidedown">ダイアログを表示 &raquo;</a>
      <div id="map"></div>
    </div>
    
    <div data-role="footer">
      <h1>DEMO</h1>
    </div>
    </div>
    
    <div data-role="page" id="sub" data-close-btn="right">
     <div data-role="header">
      <h1>タイトル</h1>
     </div>
     <div data-role="main" class="ui-content">
        <p>コメントはここから始まります</p>
      <a href="#" data-role="button" data-rel="back">閉じる</a>
     </div>
    </div>
    </body>
    
    <style type="text/css">
    #map {
     width: 100%;
     height: auto;
    }
    
    #infoWindow{
      width: 300px;
      height: 400px;
    }
    </style>
[/code]

  
位置情報を別データ(JSON)に分けたコード

[code]

    <html>
    <head>
    <meta charset="utf-8" />
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
    <link rel="stylesheet"href="http://code.jquery.com/mobile/1.4.0/jquery.mobile-1.4.0.min.css" />
    <script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.4.0/jquery.mobile-1.4.0.min.js"></script>
    <script>
    var currentWindow = null ;
    $(function() {
    $.getJSON("maps.json", function(markers){
      var setno = markers.length;
      var title = new Array();
      var lat = new Array();
      var lng = new Array();
      var text = new Array();
      for (var i = 0; i < markers.length; i++) {
        title[i] = markers[i][0];
        lat[i] = markers[i][1];
        lng[i] = markers[i][2];
        text[i] = markers[i][3];
     }
     initialize(setno, title, lat, lng, text);
     });
     });
     function initialize(setno, title, lat, lng, text) {
    
     var bodyHeight = $('body').height();
     $("#map").css('height',bodyHeight);
    
      var myOptions = {
          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"),myOptions);
      for (var i = 0; i < markers.length; i++) {
          var name = title[i];
          var latlng = new google.maps.LatLng(lat[i],lng[i]);
          var comment = text[i];
          createMarker(name, latlng, comment, map);
      }
      }
      function createMarker(name, latlng, comment, map) {
      var infoWindow = new google.maps.InfoWindow({
      });
      var marker = new google.maps.Marker({
          position: latlng,
          map: map
      });
      google.maps.event.addListener(marker, 'click', function() {
          if (currentWindow) {
              currentWindow.close();
          }
          infoWindow.setContent(
            '<div class="infoWindow">'+
            '<h2>'+name+'</h2>'+
            '<p>'+comment+'</p>'+
            '</div>'
          );
          infoWindow.open(map, marker);
          currentWindow = infoWindow;
       });
       }
       google.maps.event.addDomListener(window, 'load', initialize);
    
       </script>
       </head>
    
       <body onload="initialize()">
       <div data-role="page" id="top">
       <div data-role="header">
        <h1>DEMO</h1>
       </div>
       <div role="main" class="ui-content">
       <a href="#sub" data-rel="dialog" data-transition="slidedown">ダイアログを表示 &raquo;</a>
       <div id="map"></div>
       </div>
    
       <div data-role="footer">
       <h1>DEMO</h1>
       </div>
       </div>
    
       <div data-role="page" id="sub" data-close-btn="right">
       <div data-role="header">
        <h1>タイトル</h1>
       </div>
       <div data-role="main" class="ui-content">
       <p>コメントはここから始まります</p>
        <a href="#" data-role="button" data-rel="back">閉じる</a>
       </div>
       </div>
       </body>
    
       <style type="text/css">
       #map {
       width: 100%;
       height: auto;
       }
    
       #infoWindow{
       width: 300px;
       height: 400px;
       }
       </style>
    
[/code]

maps.json

[code]

    [
      ["TAM 東京", "35.6954806", "139.76325010000005","コメントA"],
      ["小川町駅", "35.6951212", "139.76610649999998","コメントB"],
      ["淡路町駅", "35.69496", "139.76746000000003","コメントC"],
      ["御茶ノ水駅", "35.6993529", "139.76526949999993","コメントD"],
      ["神保町駅", "35.695932", "139.75762699999996","コメントE"],
      ["新御茶ノ水駅", "35.696932", "139.76543200000003","コメントF"]
    ]
    
[/code]


CC BY-SA 3.0
2016-05-17T08:11:42.930
24928
2016-05-17T09:02:47.497
2016-05-17T09:02:47.497
76
13526
question
javascript google-maps
GoogleMapsAPIで位置情報を別ファイル(JSON)データに分ける


`initialize`を実行しすぎです。  
スクリプト内の  
`google.maps.event.addDomListener(window, 'load', initialize);`  
とHTML内の  
`<body onload="initialize()">`  
の`onload="initialize()"`が不要です。`initialize`は引数無しで実行されるとマーカーの無いマップを生成してしまいます。  
`maps.json`を取得したら一回だけ実行すればよいです。

さらに`initialize`関数自体にもバグがあります。for文のループ条件で`markers.length`を参照していますが、これはこの関数内で未定義です。引数`setno`に配列の長さを渡してますのでそれを使ってください。


CC BY-SA 3.0
2016-05-17T08:59:30.487
24929
2016-05-17T08:59:30.487
15537
24928
answer