2015-12-25 15 views
8

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

ho pensato che la vostra funzione initMap è nel bundle. js file, ho ragione? Sei sicuro che initMap sia visibile dall'ambito globale? –

+0

Ciao Marcin, sì, è disponibile. Ho modificato la domanda e sto mostrando un estratto da questo file lì – sesc360

+0

Vedo che è avvolto in alcuni moduli. –

risposta

28

Assicurarsi che initMap funzione è visibile dalla la portata globale o il parametro passato come callback to google maps.js è correttamente namespace. Nel tuo caso, la soluzione più rapida sarà la sostituzione:

function initMap(){ 
//.. 
} 

a:

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

o dello spazio dei nomi:

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

// Edit:

I vedi che nel tuo snippet di codice usi qualche async caricamento del modulo (require.js?) e il codice in cui si crea la funzione window.initMap non viene eseguito a meno che non si chiami il modulo che contiene questa dichiarazione. Quindi non hai soddisfatto la prima condizione che ho menzionato: initMap deve essere visibile dall'ambito globale prima di chiamare google maps.js.

+0

ancora nessun risultato modificato. Ho usato window.initMappa Ma sfortunatamente, il risultato è invariato e la mappa non è visibile – sesc360

+0

Quale hai usato? –

+0

La prima versione – sesc360

7

Assicurati semplicemente che l'elemento di script con la funzione initMap sia preceduto dall'elemento di script api di google maps nel tuo codice HTML. Inoltre, gli attributi di rimandatura asincrona inclusi negli esempi di Google potrebbero causare il problema. Rimuovere semplicemente quegli attributi.

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

Nella mia mappa ASe ha iniziato a mostrare dopo aver aggiunto "deferimento asincrono", non so come? – Adi

-1

Aggiungere async defer alla fine di google maps api come questo

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

spero che funzionerà bene.

+0

perché questo risolve il problema? – Martin

+0

Vedi questo per maggiori informazioni: http://stackoverflow.com/questions/22033329/defer-attribute-doesnt-work-with-google-maps-api – Adi

+2

L'aggiunta di un codice e di un semplice link di riferimento ad un'altra risposta non è una risposta in sé e non espande realmente le capacità della persona che pone la domanda. *** perchè *** funziona 'sync defere' per risolvere questo problema? – Martin

1

prova:

        <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> 
0

ho la risposta :)

Dopo un po 'di cazzeggio.Ho deciso che il file js con il tuo Google Maps funzione nel dovrebbe non essere asincrona

Così nel mio caso

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

diventato

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

Questo non significa che la chiamata all'API di Google Maps non può avere async e/o posticipare gli attributi inclusi!

Vale a dire, la mia chiamata è fatta così, e viene prima il locale home.js file di

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

ho avuto lo stesso problema. risolto spostando:

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

dopo:

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

auguriamo che possa essere d'aiuto per qualcuno ...

Problemi correlati