GoogleMapsがページの読み込みにロードされない

GoogleマップAPI V3を使用してマップを実行することができません。地図は読み込まれません。GoogleMapsがページの読み込みにロードされない

Uncaught InvalidValueError: initMap is not a function

Javascriptを

var map; 

function initMap() { 
    // Enabling new cartography and themes 
    google.maps.visualRefresh = true; 

    // Setting starting options 
    var mapOptions = { 
     center: new google.maps.LatLng(39.9078, 32.8252), 
     zoom: 10, 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
    }; 

    // Getting Map DOM Element 
    var mapElement = document.getElementById('gisMap'); 

    // Creating a map with DOM element 
    map = new google.maps.Map(mapElement, mapOptions); 
}

Bundle.js（抜粋）

：私は、マップは、私がメッセージを取得し、ID gisMapではなくクロームデバッガでのdivに表示されることを期待します

(...) 
module.exports = Vue; 
}).call(this,require('_process')) 
},{"_process":1}],3:[function(require,module,exports){ 
'use strict'; 

var map; 

function initMap() { 
    // Enabling new cartography and themes 
    google.maps.visualRefresh = true; 

    // Setting starting options 
    var mapOptions = { 
     center: new google.maps.LatLng(39.9078, 32.8252), 
     zoom: 10, 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
    }; 

    // Getting Map DOM Element 
    var mapElement = document.getElementById('gisMap'); 

    // Creating a map with DOM element 
    map = new google.maps.Map(mapElement, mapOptions); 
} 

},{}],4:[function(require,module,exports){ 
'use strict'; 

var Vue = require('vue'); 

new Vue({}); 
(...)

HTML

<!doctype html> 
<html lang="en"> 

    <head> 
    <meta charset="UTF-8"> 
    <title>MFServer Test</title> 

    <link rel="stylesheet" href="/css/app.css"> 
</head> 
    <nav class="navbar navbar-inverse navbar-fixed-top"> 
    <div class="container"> 
     <div class="navbar-header"> 
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> 
       <span class="sr-only">Toggle navigation</span> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
      </button> 
      <a class="navbar-brand" href="#">MFDispo</a> 
     </div> 
     <div id="navbar" class="collapse navbar-collapse"> 
      <ul class="nav navbar-nav"> 
       <li class="active"><a href="#">Start</a></li> 
       <li><a href="#about">GIS</a></li> 
      </ul> 
     </div><!--/.nav-collapse --> 
    </div> 
</nav> 

    <body id="app"> 
     <div class="pageWrapper"> 
      <div id="gisMap"></div> 
      <div id="content"></div> 
     </div> 

     <script src="/js/bundle.js"></script> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha256-KXn5puMvxCw+dAYznun+drMdG1IFl3agK0p/pqT9KAo= sha512-2e8qq0ETcfWRI4HJBzQiA3UoyFk6tbNyG+qSaIBZLyW9Xf3sWZHN/lxe9fTh1U45DpPf07yj94KsUHHWe4Yk1A==" crossorigin="anonymous"></script> 
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBDucSpoWkWGH6n05GpjFLorktAzT1CuEc&callback=initMap" async defer></script> 
    </body> 

</html>

SCSS

@import "node_modules/bootstrap-sass/assets/stylesheets/bootstrap"; 
@import "partials/forms"; 

html, body { 
    height: 100%; 
    padding-top: 25px; 
} 

.pageWrapper { 
    background-color: red; 
    height:100%; 
    width: 100%; 
} 

#gisMap { 
    height: 100%; 
    width: 50%; 
    background-color: green; 
}

出典

2015-12-25 sesc360

...それは誰かのためにどのような援助であることを願っています。 jsファイル、そうですか？ initMapがグローバルスコープから見えることは確かですか？ –

こんにちはマルシン、はい、利用可能です。私はこの質問を編集し、そこにこのファイルの抜粋を表示しています – sesc360

私はそれがいくつかのモジュールに包まれていることがわかります。 –

initMap関数はグローバルスコープまたはmaps.jsをGoogleにコールバックとして渡されたパラメータが適切にを名前空間さから見えることを確認してください。は、あなたのケースでは、最も早い解決策を交換する：

function initMap(){ //.. }

へ：

window.initMap = function(){ //... }

または名前空間のバージョン：

<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBDucSpoWkWGH6n05GpjFLorktAzT1CuEc&callback=YOUR.NAMESPACE.initMap" async defer></script>

//編集：

をIコードスニペットで非同期を使用するモジュールロード（require.js？）とwindow.initMap関数を作成するコードは、この宣言を含むモジュールを呼び出さない限り実行されません。だから私が言及した最初の条件を満たしていない - あなたはGoogle maps.jsを呼び出す前に、initMapをグローバルスコープから見る必要があります。

出典

2015-12-25 22:04:47

は変更されていません。私はwindow.initMapを使用しました残念ながら、結果は変更されず、マップは表示されません – sesc360

どちらを使いましたか？ –

最初のバージョン – sesc360

initMap関数を含むscript要素が、HTMLのgoogle maps apiスクリプト要素の前に来るようにしてください。また、Googleの例に含まれている非同期遅延属性によって問題が発生している可能性があります。これらの属性を削除するだけです。

<script src='/js/script.js'></script> 
<script src="https://maps.googleapis.com/maps/api/js?key=YOURKEY&callback=initMap"></script>

出典

2016-03-30 22:10:55

私のaseマップでは、 'async defer'を追加した後に表示が始まりました。 – Adi

-1

私はそれが正常に動作します願っています。この

<script type="text/javascript" src="http://maps.google.com/maps/api/js?key=YOUR API KEY HERE&callback=initMap" async defer></script>

のようにGoogle MapsのAPIの終わりにasync deferを追加します。

出典

2016-07-01 09:14:26 Adi

これはなぜ問題を解決するのですか？ – Martin

詳細はこちらを参照してください。http://stackoverflow.com/questions/22033329/defer-attribute-doesnt-work-with-google-maps-api – Adi

コードブロックと単純な参照リンクを別の回答に追加することは答えではありませんそれ自体では、本当に質問をしている人の能力を拡張していません。 ***なぜ***は '同期defere'はこの問題を解決するために働くのですか？ – Martin

試してみてください。

        <script async defer src="https://maps.googleapis.com/maps/api/js?v=3&sensor=false&key=YOUR_API_KEY&signed_in=true"> 
            initMap() 
            </script> 
            <div id="map_canvas" style=""></div> 
            <body id="loadMap" onload="initializeMap(-79, 43,'')"></body>

出典

2017-05-09 14:53:56

私は周りに少しfaffing後答え:)

を持っています。必要がありますないこと非同期

だから私の場合

<script async type="text/javascript" src="js/home.js"></script>

これは、ということを意味するものではありません

<script type="text/javascript" src="js/home.js"></script>

になったGoogleマップとのJSファイルがで機能することを私が決定しましたGoogle Maps APIの呼び出しには、 の非同期のおよび/またはの属性が含まれていることはできません。

すなわち、私の呼び出しは次のようになります、と私は同じ問題を持っていた地元のhome.jsファイル

<script src="https://maps.googleapis.com/maps/api/js?key=[APIKEY]&callback=initMap" async defer></script>

出典

2017-07-13 11:39:37

の前に来ます。

<script src="//maps.googleapis.com/maps/api/js?key=-yourkey-=initMap" async defer></script>

をした後：が移動することによって、それを解決

// Google Map 
    function initMap() { 
     GoogleMap.initGoogleMap(); 
    }

私はあなたのinitMap機能がバンドルであると仮定してきた

出典

2017-07-29 19:31:07

GoogleMapsがページの読み込みにロードされない

答えて

関連する問題