VUE + google map how include api google

Question

I started using vue. How can I include Google API to my page? This is my code:

<template>
    <div id="map"></div>
</template>

 <script>

export default {
methods: {
  init () {
    var map
    map = new google.maps.Map(document.getElementById('map'), {
      zoom: 16,
      center: new google.maps.LatLng(-33.91722, 151.23064),
      mapTypeId: 'roadmap'
    })
  }
}
}

</script>

Where can I set

<script src="https://maps.googleapis.com/maps/api/js?key=YourKey&callback=App.map" async defer></script>

[this](https://stackoverflow.com/questions/44634193/integrating-google-maps-in-vue-js) may help — logee, Aug 29 '19 at 03:06

score 1 · Answer 1 · answered Jul 06 '17 at 02:54

1

The script element goes in your index.html file, for example:

<!DOCTYPE html>
<html>
  <head>
  </head>
  <body>
    <div id="app"></div>
  </body>
  <script src="https://maps.googleapis.com/maps/api/js?key=YourKey&callback=App.map" async defer></script>
</html>

If this doesnt work for you, try removing the callback from the end of the <script> element's src attribute as well as the async and defer keywords, so it looks like:

<script src="https://maps.googleapis.com/maps/api/js?key=YourKey"></script>

Then in your vue instance, call your init() function once the App component has mounted. See below:

export default {
  mounted () {
    this.init()
  },
  methods: {
    init () {
      var map
      map = new google.maps.Map(document.getElementById('map'), {
        zoom: 16,
        center: new google.maps.LatLng(-33.91722, 151.23064),
        mapTypeId: 'roadmap'
      })
    }
  }
}

answered Jul 06 '17 at 02:54

cam

3,179
1
12
15

try do like u say... 14:19 error 'google' is not defined no-undef – Anna Dudina Jul 06 '17 at 12:41
Im going to assume that your using single file components with a JavaScript linter. You're getting that error because when the linter checks the single file component it doesnt see 'google' defined anywhere and yet you are referencing it. This is fine because we know its being loaded by index.html You can supress the error message by adding `/* eslint-disable no-undef */` just above your `export default {` line in your ` – cam Jul 07 '17 at 02:03
1

hm... i just start use `global` ty all for the answers – Anna Dudina Jul 07 '17 at 07:49

score 0 · Answer 2 · answered Oct 01 '17 at 13:11

I'd like to put the google map api just before </body>. Make sure your vue element is called before google map api (i.e. within app.js). Put initMap as the google api's callback.

<!DOCTYPE html>
<html>
  <head>
  </head>
  <body>
    <div id="app">
      <map lat="1.23456" lng="100.21345"></map>
    </div>
    <script src="app.js"></script><!-- your vue element should be here -->
    <script src="https://maps.googleapis.com/maps/api/js?key=YourKey&callback=initMap" async defer></script>
  </body>
</html>

And this is my code in Map.vue, which has a definition of window.initMap(..). I also have a marker (pin) inside the map.

<template>
  <div>
    <div ref="map" style="width: 100%; height: 200px;"></div>
  </div>
</template>

export default {
  props: [
    'lat', 
    'lng'
  ],
  mounted() {
    window.initMap = () => {

      this.mapElement = new google.maps.Map(this.$refs.map, {
        zoom: 14,
        center: {lat: this.lat, lng: this.lng}
      });

      this.marker = new google.maps.Marker({
        position: {lat: this.lat, lng: this.lng},
        map: this.mapElement
      });
    }
  },
  data() {
    return {
      mapElement: null,
      marker: null
    }
  }
}

VUE + google map how include api google

2 Answers2