InfoBubbleはGoogleマップから定義されていません。v3 api

モバイルアプリケーション用にGoogle API V3からinfobubBLESを使用しようとしています。これはまさに私がhttps://github.com/googlemaps/js-info-bubble InfoBubbleはGoogleマップから定義されていません。v3 api

をコピーしたコードであり、これらは私のjsファイル

var Map = null, 
airboxObjects = {}, 
locationObjects = {}, 
lastMeasurements = {}; 


    var infoBubble = new InfoBubble({ 
    minHeight: 200, 
    minWidth: 200, 
    maxWidth: 300, 
    disableAutoPan: true 
}); 

    function getQueryVariable(key) { 
    var query = window.location.search.substring(1); 
    var vars = query.split("&"); 
    for (var i=0; i<vars.length; i++) { 
    var pair = vars[i].split("="); 
    if(pair[0] == key) { 
    // Key found, return value 
    return pair[1]; 
     } 
    } 
    // Key not found, return null 
     return null;

} .....

されており、これは私のhtmlです

 <!DOCTYPE html> 
     <html> 

     <head> 
      <link rel="stylesheet" type="text/css"            href="bootstrap/css/bootstrap.min.css"> 
     <meta charset="UTF-8"> 
     <meta http-equiv="Content-type" content="text/html; charset=utf-8"> 
     <meta name="viewport" content="width=device-width, minimum-scale=1,  initial-scale=1, user-scalable=no"> 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js">   </script> 
    <style> 
     @-ms-viewport { width: 100vw ; min-zoom: 100% ; zoom: 100% ; }   @viewport { width: 100vw ; min-zoom: 100% zoom: 100% ; } 
      @-ms-viewport { user-zoom: fixed ; min-zoom: 100% ; }     @viewport { user-zoom: fixed ; min-zoom: 100% ; } 
    </style> 

    <link rel="stylesheet" href="css/app.css"> 
    <link rel="stylesheet" type="text/css" href="css/index_main.less.css" class="main-less"> 

    <script type="text/javascript" src="cordova.js" id="xdkJScordova_"> </script> 
    <script type="text/javascript" src="js/init-app.js"></script> 
    <script type="text/javascript" src="xdk/init-dev.js"></script> 
    <script type="text/javascript" src="js/config.js"></script> 
    <script type="text/javascript" src="js/thresholds.js"></script> 
    <script type="text/javascript" src="js/api.js"></script> 
    <script type="text/javascript" src="js/app.js"></script> 
    <script type="text/javascript" src="js/infobubble-compiled.js"></script> 
    <script type="text/javascript" src="js/infobubble.js"></script> 


    <link rel="stylesheet" href="css/style.css"> 

    <script type="application/javascript" src="lib/jquery.min.js"></script> 
    <script type="application/javascript" src="google_maps/google_maps.js"></script> 
    <script async defer src="https://maps.googleapis.com/maps/api/js?key=123456DUMMYKEY" 
    type="text/javascript"></script> 
    <script src="js/jquery-3.1.1.min.js"></script> 
    <script src="https://code.jquery.com/jquery-1.11.3.min.js"></script> 
    <script type="text/javascript"> 
     var script = '<script src="js/infobubble'; 
     if (document.location.search.indexOf('compiled') !== -1) { 
      script += '-compiled'; 
     } 
     script += '.js"><' + '/script>'; 
     document.write(script); 
    </script> 
</head> 

<body> 
    <div id="mainpage"> 

     <div id="map-canvas" ></div> 
    </div> 
</body>

私がビルドしてプロを実行すると私のエミュレータでject。私は地図が表示されますが、私が望む場所は表示されません。それはランダムな場所です。そして、InfoBubbleがjsファイルの行にあるというエラーが出る。

 var infoBubble = new InfoBubble({ 
     minHeight: 200, 
     minWidth: 200,

は定義されていない。そしてそれはまた、私にkeyapiが欠落しているという警告を与えます。しかし、あなたが見ることができるように、私は鍵を持っており、私はそれを活性化しました。

あなたは何が間違っているのか教えていただけますか？

出典

2016-11-08 ned

私はあなたがinfoBubble変数のインスタンスを間違って配置した可能性があると思います。 Infowindows in Google JS Maps APIについてのガイドを使用することをお勧めします。それはかなり簡単で簡単に従うことができます。コードに関連するサンプルのスニペットは次のとおりです。

function initMap() { 
     var uluru = {lat: -25.363, lng: 131.044}; 
     var map = new google.maps.Map(document.getElementById('map'), { 
      zoom: 4, 
      center: uluru 
     }); 

     var contentString = '<div id="content">'+ 
      '<div id="siteNotice">'+ 
      '</div>'+ 
      '<h1 id="firstHeading" class="firstHeading">Uluru</h1>'+ 
      '<div id="bodyContent">'+ 
      '</div>'+ 
      '</div>'; 

     var infowindow = new google.maps.InfoWindow({ 
      content: contentString 
     }); 

     var marker = new google.maps.Marker({ 
      position: uluru, 
      map: map, 
      title: 'Uluru (Ayers Rock)' 
     }); 
     marker.addListener('click', function() { 
      infowindow.open(map, marker); 
     }); 
     }

出典

2016-11-13 11:24:39 noogui

InfoBubbleはGoogleマップから定義されていません。v3 api

答えて

関連する問題