Non riesco a far funzionare la mia mappa utilizzando l'API V3 di Google Maps. La mappa non viene caricata. Mi aspetto la mappa per apparire nel div con l'ID gisMap
ma nel Chrome Debugger ricevo il seguente messaggio:GoogleMaps non viene caricato sul caricamento della pagina
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 (estratto)
(...)
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;
}
ho pensato che la vostra funzione initMap è nel bundle. js file, ho ragione? Sei sicuro che initMap sia visibile dall'ambito globale? –
Ciao Marcin, sì, è disponibile. Ho modificato la domanda e sto mostrando un estratto da questo file lì – sesc360
Vedo che è avvolto in alcuni moduli. –