

geolocationAPIを導入前にはマーカーは表示されていましたがデバック時に

> InvalidValueError: setMap: not an instance of Map; and not an instance of
> StreetViewPanorama

というエラーが表示され、マーカーが消滅してしまいます。（中心座標の取得はできていました）どういう意味なのかがわかりません。ご教授願いいたします。

追記：書かれなかった処理を追加しました

[code]

    <html>
    <head>
      <meta charset="utf-8" />
      <meta name="viewport" content="width=device-width,initial-scale=1">
      <script src="https://maps.googleapis.com/maps/api/js?key=Yourkey"></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 gmap = null;
     $(document).on('pageshow','#map', drawMap );
    
    function drawMap(){
     if (gmap == null){
     initialize(data,map); // 地図の初期化
     }
    }
    
    $(function(){
    //JSONファイル読み込み開始
    $.ajax({
     type: "POST",
     url:"json.php",
     cache:false,
     dataType:"json",
     success:function(json){
      var data=jsonRequest(json);
      initialize(data,map);
      }
     });
    });
    
    var currentInfoWindow = null;
    
    // 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 createClickCallback(marker, infoWindow){
      return function(){
       if (currentInfoWindow){
        currentInfoWindow.close();
       }
      infoWindow.open(marker.getMap(), marker);
      currentInfoWindow = infoWindow;
     };
    }
    
    //現在地取得
    
    navigator.geolocation.getCurrentPosition(succesCallback);
     function succesCallback(pos){
     var Position_latitude = pos.coords.latitude;
     var Position_longitude = pos.coords.longitude;
      //console.log(Position_latitude,Position_longitude);
     geo_location(Position_latitude,Position_longitude);
    }
    
    function geo_location(x,y){
     var bodyHeight = $('body').height();
     $("#map").css('height',bodyHeight);
      var opts={
       zoom: 16,
       center: new google.maps.LatLng(x,y),
       mapTypeId: google.maps.MapTypeId.ROADMAP
      };
     var map = new google.maps.Map(document.getElementById("map"),opts);
    }
    //地図生成
     function initialize(data,map){
    
      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({
      maxWidth: 250,
      content:'<div class="infoWindow">'+
             '<h2>'+dat.title+'</h2>'+
             '<span>'+dat.comment+'</span>'+
             '</div>'
      });
       google.maps.event.addListener(marker, 'click', createClickCallback(marker, infoWindow));
    
      }
     }
    
    </script>
    </head>
    
    <body>
     <div data-role="page" id="top">
      <div data-role="header">
        <h1>DEMO</h1>
      </div>
     <div role="main" class="ui-content">
       <div id="map"></div>
     </div>
    
     <div data-role="footer">
       <div data-role="navbar" data-iconpos="bottom" class="navi_bar">
        <ul>
        <li class="ui-block-a"><a href="index.html" rel="external" data-icon="home" class="ui-btn-active ui-state-persist">Map</a></li>
        <li class="ui-block-b"><a href="sentpage.html" rel="external" data-icon="info">Info</a></li>
       </ul>
      </div>
      </div>
      </div>
    
     </body>
    
     <style type="text/css">
     #map {
     width: 100%;
     height: auto;
     }
    
     #infoWindow{
     width: 100%;
     height: auto;
     }
     </style>
    
[/code]


CC BY-SA 4.0
2016-12-06T20:21:14.393
30965
2019-09-09T15:04:28.943
2019-09-09T15:04:28.943
32986
13526
question
javascript google-maps
地図の中心座標をgeolocationAPIで取得するとマーカーが消滅する


> InvalidValueError: setMap: not an instance of Map; and not an instance of
> StreetViewPanorama

（約妙）不正な値エラー：setMap()メソッドに MapまたはStreetViewPanoramaクラスのインスタンス以外が渡されました

っていう意味です。  
つまり `infoWindow.open(marker.getMap(), marker);` の部分がおかしいですね。

infoWindow.open()メソッドのコードが公開されているわけではないですが、Mapクラスのインスタンスを渡しているのはこの部分だけなので、ここですかね。  
ソースコードの全体が提示されてないので、完全に特定はしていないですけど。

* * *

Nao Teraさんが書いたコードを動くようにすると、こんな感じになります。  
(もう少し良いコードの書き方はあると思いますが...)

[code]

    <!DOCTYPE html>
    <html>
      <head>
        <title>Simple Map</title>
        <meta name="viewport" content="initial-scale=1.0">
        <meta charset="utf-8">
        <style>
          html, body {
            height: 100%;
            margin: 0;
            padding: 0;
          }
          #map {
            height: 100%;
          }
        </style>
        <script src="https://maps.googleapis.com/maps/api/js" async></script>
        <script>
          window.addEventListener("load", function() {
            var currentInfoWindow = null;
    
            // 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 createClickCallback(marker, infoWindow){
              return function() {
                if (currentInfoWindow){
                  currentInfoWindow.close();
                }
                infoWindow.open(marker.getMap(), marker);
    
                currentInfoWindow = infoWindow;
              };
            }
    
            //地図生成
            navigator.geolocation.getCurrentPosition(
              function geo_location(pos){
               var opts={
                 zoom: 16,
                 center: new google.maps.LatLng(pos.coords.latitude, pos.coords.longitude),
                 mapTypeId: google.maps.MapTypeId.ROADMAP
              };
    
              var map = new google.maps.Map(document.getElementById("map"),opts);
    
              initialize(map, [
                {
                  lat: pos.coords.latitude - pos.coords.latitude/100000,
                  lng: pos.coords.longitude - pos.coords.latitude/100000,
                  title: "marker 1",
                  comment: "marker 1"
                },
                {
                  lat: pos.coords.latitude + pos.coords.latitude/100000,
                  lng: pos.coords.longitude + pos.coords.longitude/100000,
                  title: "marker 2",
                  comment: "marker 2"
                }
              ])
            });
    
            function initialize(map, data){
              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({
                  maxWidth: 250,
                  content:'<div class="infoWindow">'+
                     '<h2>'+dat.title+'</h2>'+
                     '<span>'+dat.comment+'</span>'+
                     '</div>'
                 });
                 google.maps.event.addListener(marker, 'click', createClickCallback(marker, infoWindow));
               }
    
             }
          }, false);
        </script>
      </head>
    
      <body>
        <div id="map"></div>
      </body>
    </html>
    
[/code]


CC BY-SA 3.0
2016-12-07T17:59:15.980
30997
2016-12-07T17:59:15.980
4766
30965
answer