web-dev-qa-db-ja.com

Googleマップはページの読み込み時に読み込まれません

GoogleMaps API V3を使用して地図を実行できません。マップはロードされません。 id gisMapのdivにマップが表示されるはずですが、Chrome Debuggerには次のメッセージが表示されます。

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（抜粋）

(...)
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;
}
javascripthtmlgoogle-maps
12
sesc360

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

function initMap(){
//..
}

に：

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

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

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

//編集：

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

33
Marcin Zablocki

InitMap関数を含むスクリプト要素が、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>
11
Ron Royston

試してください：

                                    <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>
1
Damir Olejar

同じ問題がありました。移動することで解決しました：

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

後：

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

それが誰かの助けになることを願っています...

1
Wim Rotor

私は答えがあります:)

少し回り込んだ後。 Googleマップ関数を含むjsファイルはnotであるasyncであると判断しました

だから私の場合

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

なりました

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

これは、Google Maps API呼び出しがasyncおよび/またはdefer属性が含まれています！

つまり、私の呼び出しは次のようになり、ローカルのhome.jsファイルの前に来ます

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