[Vuejs]-Vue.js breaking Google Map functionality

1👍

✅

I recommend using the Vue google map component (vue2-google-maps).

Follow this example code:

<body>
  <div id="root">
    <google-map :center="{lat: 1.38, lng: 103.8}" :zoom="12" style="width: 100%; height: 500px">
      <ground-overlay source="./overlay.png" :bounds="{
            north: 1.502,
            south: 1.185,
            east: 104.0262,
            west: 103.5998,
        }" :opacity="0.5">
      </ground-overlay>
    </google-map>
  </div>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.0/vue.js"></script>
  <script src="vue-google-maps.js"></script>

  <script>
    Vue.use(VueGoogleMaps, {
      load: {
        key: 'AIzaSyBzlLYISGjL_ovJwAehh6ydhB56fCCpPQw',
        v: '3.26',
      },
      // Demonstrating how we can customize the name of the components
      installComponents: false,
    });
    document.addEventListener('DOMContentLoaded', function() {
      Vue.component('google-map', VueGoogleMaps.Map);
      Vue.component('ground-overlay', VueGoogleMaps.MapElementFactory({
        mappedProps: {
          'opacity': {}
        },
        props: {
          'source': {type: String},
          'bounds': {type: Object},
        },
        events: ['click', 'dblclick'],
        name: 'groundOverlay',
        ctr: () => google.maps.GroundOverlay,
        ctrArgs: (options, {source, bounds}) => [source, bounds, options],
      }));
      new Vue({
        el: '#root',
        data: {
          place: '',
        },
      });
    });
  </script>

</body>

Or, if you’re using webpack and Vue file components, follow the instructions bellow.

First install it : npm install vue2-google-maps

Then register it in main.js file

import Vue from 'vue'
import * as VueGoogleMaps from 'vue2-google-maps'

Vue.use(VueGoogleMaps, {
  load: {
    key: 'YOUR_API_TOKEN',
    libraries: 'places', // This is required if you use the Autocomplete plugin
  }
})

So, you can use it like a component:

<GmapMap
  :center="{lat:10, lng:10}"
  :zoom="7"
  map-type-id="terrain"
  style="width: 500px; height: 300px"
>
  <GmapMarker
    :key="index"
    v-for="(m, index) in markers"
    :position="m.position"
    :clickable="true"
    :draggable="true"
    @click="center=m.position"
  />
</GmapMap>

More at:
https://www.npmjs.com/package/vue2-google-maps

https://github.com/xkjyeah/vue-google-maps/blob/no-deferred-ready/examples/overlay.html

https://alligator.io/vuejs/vue-google-maps/ (tutorial)

👤Felipe Thomas