vue-google-maps
vue-google-maps copied to clipboard
xkjyeah
Map: Expected mapDiv of type Element but was passed undefined
I'm using this map library in my nuxt app.
The error happens when router changes between different page layout. So if one page is based on layout default and another is using layout map . The error will come up when routing to map page.
message: "Map: Expected mapDiv of type Element but was passed undefined."
name: "InvalidValueError"
stack: "Error↵ at new id (https://maps.googleapis.com/maps/api/js?key=AIzaSyDfGjwP8mMSfzQelzyE-pJjJdmHtuPOdjg&libraries=places&callback=vueGoogleMapsInit:62:72)↵ at Object._.jd (https://maps.googleapis.com/maps/api/js?key=AIzaSyDfGjwP8mMSfzQelzyE-pJjJdmHtuPOdjg&libraries=places&callback=vueGoogleMapsInit:62:182)↵ at new zi (https://maps.googleapis.com/maps/api/js?key=AIzaSyDfGjwP8mMSfzQelzyE-pJjJdmHtuPOdjg&libraries=places&callback=vueGoogleMapsInit:132:50)↵ at http://localhost:3000/_nuxt/vendors.app.js:48929:27"
__proto__: Error
constructor: ƒ (a)
__proto__: Object
It is working fine if i set both page layout to be map or default.
Hi @haog1 -
Any luck finding out what caused this? I am getting the same message.
-James
i solved this for mi case, the error it happened when i try tu re-render with :key="" form, so i only change the data for parent component, this fix the issue for me.
🦊
sure @ngunyimacharia i change the props i seend but never change :key prop, i can explain this well with a example:
i have a componet like this ->
<trip-route-detail :timelinePoints="filterTimelinePoints" :events="filterEvents" :tracking="filterTracking" :key="selected.length + searchText.length"/>
inside have a map with markers, the error appears when trying to change the key property of the parent component and the way to solve it is to change the other data, but the key is never worse, whenever that property is updated, the error occurs.
Same problem here with routing from different layout. I tried different solution but nothing is working.
sure @ngunyimacharia i change the props i seend but never change
:keyprop, i can explain this well with a example: i have a componet like this -><trip-route-detail :timelinePoints="filterTimelinePoints" :events="filterEvents" :tracking="filterTracking" :key="selected.length + searchText.length"/>inside have a map with markers, the error appears when trying to change the key property of the parent component and the way to solve it is to change the other data, but the key is never worse, whenever that property is updated, the error occurs.
I don't understand. So you suggest using static key property on that trip-route-detail or its parent? Am I right?
I have the same problem.
@SebastianMieszczanczyk for my project I switched to https://github.com/diegoazh/gmap-vue, a fork of this vue2-google-maps. It's working with Nuxt and is maintained ! No problems anymore.
@SebastianMieszczanczyk for my project I switched to https://github.com/diegoazh/gmap-vue, a fork of this vue2-google-maps. It's working with Nuxt and is maintained ! No problems anymore.
Yes, but there is no support for Typescript which I already have in my project. Do you have TS? This is the only thing that is blocking me from switching.