Map not initialised with `nuxt generate`

[davidpmccormick]

I'm trying to get this working with a static site generated by nuxt generate.

The necessary markup gets rendered, but the map itself seems to fail to initialise. I don't see any errors in the console.

Everything works as expected when not running as a static site.

[mornir]

I'm having the same problem 🤔 @davidpmccormick did you solve it eventually?

[davidpmccormick]

I ended up using this plugin instead, which worked (never figured out why this one didn’t).

[mornir]

@davidpmccormick Oh nice, I love Akryum's work. But in the meantime I solved the issue by adding the following css:

.vue-map {
  width: 100%;
  height: 100%;
}

[rafaelmagalhaes]

I'm having a similar issue, it runs fine in dev environment but the plugin won't build in production and causes other plugins not to work too.

I created google-maps.js file inside plugins folder

plugins/google-maps.js

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

Vue.use(VueGoogleMaps, {
    load: {
        key: 'KEY',
        libraries: "places" // necessary for places input
    }
});

then inside nuxt-config

 plugins: [
        {src: '~/plugins/google-maps.js', ssr: false},
    ],
  build: {
        transpile: [/^vue2-google-maps($|\/)/], 
}

The only error i get is
TypeError: n.e is not a function

[evostrength]

@davidpmccormick I'm having the same problem with this plugin; works fine in dev mode but fails to load the map when running build or generate.

Interestingly, I'm having the same issues with the other vue-googlemaps plugin that you said you were able to get working. I can't get the map to load in production mode or statically; only in development mode.

Any insight into how you were able to get it working with static or server side rendering?

[rafaelmagalhaes]

I ended up leaving this plugin and wrote one plugins/google-maps.js

export const loadedGoogleMapsAPI = new Promise((resolve, reject) => {
    if (process.client) {
        window['GoogleMapsInit'] = resolve;

        let GMap = document.createElement('script');

        GMap.setAttribute('src',
            `https://maps.googleapis.com/maps/api/js?key=KEY&libraries=places&callback=GoogleMapsInit`);

        document.body.appendChild(GMap);
    }
});

then on my component or page, I just import the plugin

import {loadedGoogleMapsAPI} from '~/plugins/google-maps'

 mounted() {
            loadedGoogleMapsAPI.then(() => {
                this.getreviews()
            });

        },

  getreviews() {

                let request = {
                    placeId: "PLACEID",
                    fields: ["reviews"]
                };
                let service = new google.maps.places.PlacesService(document.createElement('div'));
                service.getDetails(request, (place, status) => {
                    if (status === google.maps.places.PlacesServiceStatus.OK) {
                        this.$store.commit('setTestimonials', place.reviews)
                    }
                });

            }

Im using google maps API go get google reviews for a certain place and works fine in production and development

[davidpmccormick]

@evostrength I've not worked on the project I was looking at for a long time (it never really got off the ground), but the repo is here and as far as I'm aware, it works statically with the plugin – I can't remember what, if anything, I did to make it work, but hopefully you can figure it out!

[saimunhossain]

@davidpmccormick You have to initial center and markers such as ```` center: { lat: 23, lng: 90 }, markers: [ { position: { lat: 23, lng: 90 } }

In my case it was worked

[dominic676767]

@davidpmccormick You have to initial center and markers such as ```` center: { lat: 23, lng: 90 }, markers: [ { position: { lat: 23, lng: 90 } }

In my case it was worked

I just want to say THANK YOU after searching for few days solving this elusive bug of the map not rendering on Nuxt generate. The marker's position need to be put in to render the map but for my case I didn't have marker on mounted. I put a v-if on the marker component only resolve the bug.

THANKS