3
votes

VueJS, ReferenceError: google n'est pas défini

J'ai le code source suivant et j'ai aussi l'erreur suivante lorsque j'essaye d'instancier une nouvelle var avec google.maps ... :

google 'n'est pas défini

De nombreuses réponses parlaient de charger le script de l'API de manière asyncronale avant tout, et l'ordre des scripts compte, mais je ne pense pas que ce soit mon problème.

PS: I utilisez ceci dans le main.js

<script>    
    import _ from 'lodash'    
    import { mapState } from 'vuex'    
    import * as VueGoogleMaps from 'vue2-google-maps'   

    export default {    
      computed: {    
        ...mapState([    
          'map',    
        ]),    
        mapStyle: function () {     
          const h = document.body.clientHeight - 80    
          return 'width: 100%; height: ' + h + 'px'    
        },    
        center: function () {    
          return { lat: 44.837938, lng: -0.579174 }    
        },    
      },    
      mounted: function () {    
        VueGoogleMaps.loaded.then(() => {
           var map = new google.maps.Map(document.getElementById('map'))    
        }
      },

Quelqu'un peut-il m'aider? Merci.

<div class="map-container">     
       <gmap-map     
         id="map"     
         ref="map"     
         :center="center"     
         :zoom="15"     
         map-type-id="roadmap"     
         style="width:100%;  height: 400px;">     
           <gmap-marker     
           :key="index"    
            v-for="(m, index) in markers"    
            :position="m.position"    
             @click="center=m.position"    
             ></gmap-marker>    
                </gmap-map>
            </div>

Vue.use(VueGoogleMaps, {    
  load: {    
    key: 'MY-KEY',    
    libraries: 'places', //// If you need to use place input    
  },    
})

javascript vue.js vuejs2 google-maps vue2-google-maps

1 commentaires

Après avoir parcouru une partie du code source, il me semble que le plugin n'expose pas une API et qu'il utilise google en tant que global, donc il s'attend à ce qu'il être chargé en dehors de la bibliothèque. Vous pourrez peut-être le faire fonctionner si vous utilisez window.google , mais uniquement si cette bibliothèque est chargée séparément.

3 Réponses :

1
votes

Vous avez oublié une parenthèse:

<template>
  <GmapMarker ref="myMarker"
    :position="google && new google.maps.LatLng(1.38, 103.8)" />
</template>
<script>
import {gmapApi} from 'vue2-google-maps'

export default {
  computed: {
    google: gmapApi
  }
}
</script>

Dites-moi si cela vous aide.

Aussi de NPM vue2-google-maps ,

Si vous avez besoin d'accéder à l'objet google :

VueGoogleMaps.loaded.then(() => {
           var map = new google.maps.Map(document.getElementById('map'))    
        })

3 commentaires

Cela n'aide pas son problème. J'ai publié une réponse similaire et l'ai supprimée car elle ne résolvait pas le problème.

Modification de mon message: il manque une parenthèse. Je l'ai fait fonctionner dans une CodeSandbox.

@charlycou oui, j'ai utilisé la réponse "Matthias S" pour résoudre le problème

5
votes

Comme vous avez tout importé en tant que VueGoogleMaps , je suppose que google se trouve dans cet objet.

EDIT: Il semble que l'objet google s'appelle gmapApi.

Alors changez

computed: {
    google: VueGoogleMaps.gmapApi
}

let map = new VueGoogleMaps.gmapApi.maps.Map(document.getElementById('map'))

Puisque vous n'importez rien de manière explicite, tout doit reposer dans VueGoogleMaps . Donc, si vous voulez l'appeler google , ajoutez le champ calculé comme décrit dans l'autre réponse, sauf que gmapApi doit se trouver dans VueGoogleMaps .

Donc

var map = new google.maps.Map(document.getElementById('map'))

1 commentaires

Il semble que vous référeniez peut-être des informations de vue-google-maps . Il ne semble pas que vue2-google-maps ait une API

1
votes

Si vous obtenez " maps of null ", cela signifie que la propriété calculée par Google n'est pas encore prête.

Essayez ceci:

this.$gmapApiPromiseLazy().then(() => {
  //your code here
  //E.g. for directions
  var directionsService = new this.google.maps.DirectionsService();
});

Dans votre méthode pour attendre gmapApi:

computed: {
    google: VueGoogleMaps.gmapApi
}
...

0 commentaires