GoogleMaps ne se charge pas au chargement de la page

Je ne peux pas obtenir ma carte de course à l'aide de l'API GoogleMaps V3. La carte ne se charge pas. J'attendrais la carte apparaissent dans le div avec l'id gisMap mais dans le Chrome Débogueur, j'obtiens le message:

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;
}

source d'informationauteur sesc360

  1. 30

    Assurez-vous que initMap fonction est visible à partir de la portée mondiale ou le paramètre passé que le rappel de google maps.js est correctement des espaces de.
    Dans votre cas, la solution la plus rapide sera le remplacement:

    function initMap(){
//..
}

    :

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

    ou de l'espace version:

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

    //Edit:

    Je vois que dans votre extrait de code que vous utilisez certains async chargement du module (require.js?) et le code dans lequel vous créez la fenêtre.initMap fonction n'est pas exécutée, à moins que vous appelez le module qui contient cette déclaration. Si vous n'avez pas rempli la condition première que j'ai mentionnées - le initMap doit être visible à partir de la portée mondiale avant d'appeler google maps.js.

  2. 9

    Assurez-vous simplement que l'élément de script avec le initMap fonction il s'agit avant de l'api google maps élément de script dans votre code HTML. Aussi, l'async reporter les attributs inclus dans Google exemples peuvent être à l'origine du problème. Tout simplement supprimer ces attributs.

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

    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>
  4. 1

    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();
    }

    Espère qu'il sera d'aucune aide pour quelqu'un...

  5. 0

    J'ai la réponse 🙂

    Après un peu de tourner en rond. J'ai déterminé que le fichier js avec votre fonction de Google Maps doit 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'API Google Maps appel ne peut pas avoir async et/ou reporter attributs inclus!

    C'est à dire, mon appel ressemble à ça, et arrive devant le local home.js fichier

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

    Ajouter async defer à la fin de l'api google maps comme ce

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

    J'espère que cela fonctionnera très bien.