vuejs / Discussion

Vue.js discussion
167 stars 17 forks source link

Google is not defined #1323

Closed varadekd closed 6 years ago

varadekd commented 7 years ago

trying to import google map in my vue component using this particular code.

<template>
  <div id="Simulatelocation">
      <div id="myMap"></div>
  </div>
</template>

<script>
export default {
  name: 'Simulatelocation',
  data () {
    return {
      map : ''
    }
  },
  mounted: function() {
        //console.log("map: ", google.maps)
            this.map = new google.maps.Map(document.getElementById('myMap'), {
            center: {lat:61.180059, lng: -149.822075},
            scrollwheel: false,
            zoom: 4
            })
  }

}
</script>
<style scoped>
    #myMap {
    height:300px;
    width: 100%;
   }
</style>

and getting the following errors:

ReferenceError: google is not defined at VueComponent.mounted (Simulatelocation.vue:19) at callHook (vue.esm.js:2868) at Object.insert (vue.esm.js:4045) at invokeInsertHook (vue.esm.js:5799) at VueComponent.patch [as patch] (vue.esm.js:6018) at VueComponent.Vue._update (vue.esm.js:2623) at VueComponent.updateComponent (vue.esm.js:2741) at Watcher.get (vue.esm.js:3084) at Watcher.run (vue.esm.js:3161) at flushSchedulerQueue (vue.esm.js:2927)

I have imported the API with key in my index.html so that it is globally accessible. Can some one please help me out, what I am missing or is there something wrongly written

peachsky1 commented 6 years ago

I got stuck with the same issue. can anyone comment any tip please?

ali-turki commented 6 years ago

you might find the solution in the link. https://stackoverflow.com/a/46824492/5853931