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 may help

logee
– logee

2019-08-29 03:06:11 +00:00
Commented Aug 29, 2019 at 3:06 — logee
– logee, Commented Aug 29, 2019 at 3:06

cam · Accepted Answer · 2017-07-06 02:54:31Z

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 6, 2017 at 2:54

cam

3,7301 gold badge16 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Anna Dudina Over a year ago

try do like u say... 14:19 error 'google' is not defined no-undef

cam Over a year ago

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 <script> section.

Anna Dudina Over a year ago

hm... i just start use global ty all for the answers

Vee Trairattanapa · Accepted Answer · 2017-10-01 13:11:04Z

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

Collectives™ on Stack Overflow

VUE + google map how include api google

2 Answers 2

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related