web-dev-qa-db-fra.com

Google Maps ne se charge pas au chargement de la page

Je ne parviens pas à exécuter ma carte à l'aide de l'API GoogleMaps V3. La carte ne se charge pas. Je m'attendrais à ce que la carte apparaisse dans la div avec l'ID gisMap mais dans le débogueur Chrome, le message suivant s'affiche: 

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 (extrait) 

(...)
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

Assurez-vous que la fonction initMap est visible à partir de la portée globale ou que le paramètre transmis en tant que rappel à Google Maps.js est bien namespaced . en remplaçant:

function initMap(){
//..
}

à:

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

ou version de l'espace de noms:

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

//Modifier:

Je vois que dans votre extrait de code, vous utilisez un chargement de module asynchrone (require.js?) Et que le code dans lequel vous créez la fonction window.initMap n'est pas exécuté à moins d'appeler le module contenant cette déclaration. Donc, vous n'avez pas rempli la première condition que j'ai mentionnée - initMap doit être visible depuis l'étendue globale avant d'appeler google maps.js.

32
Marcin Zablocki

Assurez-vous simplement que l'élément de script avec la fonction initMap qu'il contient vient avant l'élément de script Google Maps api dans votre code HTML. En outre, les attributs de report async inclus dans les exemples de Google peuvent être à l'origine du problème. Supprimez simplement ces attributs.

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

essayer:

                                    <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

J'ai eu le même problème. Résolu en déplaçant:

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

après:

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

J'espère que ce sera d'aucune aide pour quelqu'un ...

1
Wim Rotor

J'ai la réponse :)

Après un peu de bruit. J'ai déterminé que le fichier js avec votre fonction Google Maps dans devrait pas être async

Donc dans mon cas

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

est devenu

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

Cela ne signifie pas que l'appel d'API Google Maps ne peut pas inclure les attributs async et/ou defer!

Par exemple, mon appel ressemble à ceci et vient avant le fichier local home.js 

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