GoogleMaps ne se charge pas sur le chargement de la page

Je ne peux pas utiliser ma carte Google Maps API V3. La carte ne se charge pas. Je m'attends à ce que la carte apparaisse dans la div avec l'id gisMap mais dans le débogueur Chrome, je reçois 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; }

Assurez-vous que la fonction initMap est visible à partir de la portée globale ou le paramètre transmis comme rappel vers google maps.js est correctement classé dans les noms . Dans votre cas, la solution la plus rapide sera remplaçable:

 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 async (require.js?) Et que le code dans lequel vous créez la fonction window.initMap ne s'exécute que si vous appelez le module qui contient cette déclaration. Donc, vous n'avez pas rempli la première condition que j'ai mentionnée: l'initMap doit être visible depuis la portée globale avant d'appeler google maps.js.

Assurez-vous simplement que l'élément de script avec la fonction initMap est avant l'élément de script google maps api dans votre code HTML. En outre, les attributs de report asynchrones inclus dans les exemples de Google peuvent causer le problème. Il suffit de supprimer ces attributs.

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

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>

J'ai la réponse 🙂

Après un peu de faffing autour. J'ai déterminé que le fichier js avec votre fonction Google Maps ne devrait pas être asynchrone

Donc dans mon cas

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

devenu

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

Cela ne signifie pas que l'appel de l'API Google Maps ne peut pas avoir des astérisques et / ou différer les attributs inclus!

C'est-à-dire, mon appel ressemble à ça et vient avant le fichier home.js local

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

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

 <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 cela aidera quelqu'un …

Ajouter un async defer à la fin de Google Maps api comme ça

<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 ça va bien.