Meteor+Vue+Google Maps

VueJS
1

I can’t seem to get this combo to work. I’ve tried both the vue2-google-maps and Akryum’s Vue-googlemaps NPMs and neither work. I’ve copied code from the documentation and from the provided samples with no luck. In the former case, I get ReferenceError: MarkerClusterer is not defined (even though I installed marker-clusterer-plus), in the latter case, I get no errors or warnings and no map rendered. In both cases lodash, marker-clusterer-plus, vue, and vueBootstrap are imported globally.

I’m trying to render the map inside a div which is nested in a Bootstrap container. Here is the code for the vue2-google-maps version:

<template>
  <div class="map-container">
    <p>Google map goes here</p>
    <gmap-map
      :center="{lat:1.38, lng:103.8}"
      :zoom="12"
      map-type-id="terrain">
    </gmap-map>
  </div>
</template>

<script>
  import MarkerClusterer from 'marker-clusterer-plus';
  var VueGoogleMaps = require('vue2-google-maps/dist/vue-google-maps')

  Vue.use(VueGoogleMaps, {
    load: {
      apiKey: 'AIzaSyCzcadxaoXuPGaqQ_u4OCW-kY4IhIQ5R_Q',
    },
  });

export default {
  name: "maps",
  data () {
    return {
      center: {
        lat: 48.853,
        lng: 2.298,
      },
      userPosition: null,
      zoom: 12,
    }
  },
}
</script>

<style>
  .map-container {
    width: 500px;
    height: 300px;
  }
</style>

Akryum’s VueGoogleMaps version:

<template>
  <div>
    <p>Google map goes here</p>
    <googlemaps-map
      class="map"
      ref="map"
      :center.sync="center"
      :zoom.sync="zoom"
    >

      <googlemaps-user-position
        @update:position="setUserPosition"
      />

      <!-- Marker -->
      <googlemaps-marker
        title="Paris"
        :position="{ lat: 48.8735, lng: 2.2951 }"
      />

    </googlemaps-map>
  </div>
</template>

<script>
  import 'vue-googlemaps/dist/vue-googlemaps.css';
  import VueGoogleMaps from 'vue-googlemaps';

  Vue.use(VueGoogleMaps, {
    load: {
      apiKey: ' AIzaSyCzcadxaoXuPGaqQ_u4OCW-kY4IhIQ5R_Q ',
      libraries: ['places'],
    },
  });

export default {
  name: "maps",
  data () {
    return {
      center: {
        lat: 48.853,
        lng: 2.298,
      },
      userPosition: null,
      zoom: 12,
    }
  },
  methods: {
    centerOnUser () {
      if (this.userPosition) {
        this.center = this.userPosition
      }
    },

    setUserPosition (position) {
      this.userPosition = position
    },
  },
}
</script>

In both cases Google map goes here is rendered in the correct spot, but no map is visible. I’m guessing that I need to do something to trigger the render, but can’t find anything in either README or any of the examples. At this point I’m just trying to get a map (any map) to render so things like map size or type or location don’t matter to me right now.

Any help or suggestion would be greatly appreciated. TIA.

2

Did you check out this example app?

3

Yes, I copied the code from vue-meteor-demo/src/imports/ui/GoogleMap.vue. Just compared for the 100th time and noticed the style was missing. Added that, but still nothing renders. I tried rendering the map outside of the Bootstrap container to see if that was the problem, but, again, nothing. I’ve even tried using your APIKey.

I’m not using vuex or vue-router, could that be the problem?

4

Stepping through the code with the chrome debugger it looks like the Google Map API load method is not being called from here:

Vue.use(VueGoogleMaps, {
    load: {
      apiKey: 'AIzaSyCV908coKxEB_GcWuGucl79Zy_rIG4GQSI',
      // apiKey: 'AIzaSyCzcadxaoXuPGaqQ_u4OCW-kY4IhIQ5R_Q',
      libraries: ['places'],
    },
  });

With vue-devtools, googleMapsReady is still set to false after the Vue.use call. Is there some piece of async magic that isn’t working because I’m not using vuex or vue-router?

5

I’ve narrowed the problem down to these lines of code:

import VueGoogleMaps from 'vue-googlemaps';
Vue.use(VueGoogleMaps, {
  load: {
    apiKey: 'AIzaSyCV908coKxEB_GcWuGucl79Zy_rIG4GQSI',
    libraries: ['places'],
  },
});

Stepping into the Vue.use with the debugger, the load option is not being passed in. Stepping into either of the map demo programs, the load option is passed in as expected. I cut and pasted this code from the vue-meteor-demo example. The only difference is that I added the semi-colons because that is what my linter wants (I’ve tried without them and it makes no difference). I’ve moved these lines of code around to various places in my app without any effect (currently they are in plugins.js which is imported at the very top of main.js.) Can anyone spot a typo or anything else wrong with the code or suggest what would make the Vue.use call not pass in the options?

6

Did you get it to work?