Uncaught (in promise) Object { message: "Map: Expected mapDiv of type HTMLElement but was passed null.",

[web-programmer-here]

Hi, I am trying to use this library but I get this error:

Uncaught (in promise) 
Object { message: "Map: Expected mapDiv of type HTMLElement but was passed null.",....

This is how I used it in my content component

....
// script.js
import { GoogleMap, Marker } from "vue3-google-map";

export default {
    name: "Content",
    props: {
        data: Object,
    },
    components: { GoogleMap, Marker },
    data() {
        return {
                    center: { lat: 40.689247, lng: -74.044502 },
.....

//component.vue
....
<GoogleMap
    :api-key="API_KEY"
    style="width: 100%; height: 500px"
    :center="center"
    :zoom="15"
>
<Marker :options="{ position: center }" />
</GoogleMap>
...

am I doing this properly?

[HusamElbashir]

@web-programmer-here From your code nothing seems out of the ordinary. Can you share a reproduction on CodeSandbox?

[web-programmer-here]

@HusamIbrahim thanks for the quick reply, I tried to create a sandbox but it did not work, I am new to vue and I broke down my template structure like this here is what I created for snadbox https://codesandbox.io/s/prod-field-1imhj?file=/src/components/App/script.js

components
--App
-----index.js
-----script.js
-----component.js
--Content
-----index.js
-----script.js
-----component.js
---index.js
main.js

[HusamElbashir]

@web-programmer-here Can you try https://vite.new/vue? Otherwise maybe share a link to a repo

[web-programmer-here]

@HusamIbrahim thanks, the project is too big and this map is just part of it, do you know what could cause an issue to give this error: Expected mapDiv of type HTMLElement? maybe I can debug it that way, also noticed TypeError: e is undefined in console log

[HusamElbashir]

Hard to tell without a reproduction @web-programmer-here . Your code appeared to be working fine, at least when I tried reproducing the issue: https://stackblitz.com/edit/vitejs-vite-qmahue?file=src/components/HelloWorld.vue&terminal=dev

[web-programmer-here]

@HusamIbrahim I finally managed to create a sandbox here https://codesandbox.io/s/sample-test-cs7up

I have been trying to figure out what is the issue with this and no luck, been banging my head all day :(

[HusamElbashir]

Hey @web-programmer-here Not sure what the issue there is but probably something to do with your webpack config. I tried the Vue CLI scaffolding (webpack based) and your code appears to work there: https://codesandbox.io/s/shy-darkness-2bh96

[web-programmer-here]

@HusamIbrahim Thanks, I don't have this issue with other libraries, is there something specific about this one that it may not work with webpack? the webpack setup is pretty basic, I even disabled splitChunks in configuration but still does not work.

[JoseGoncalves]

@web-programmer-here This library does work with webpack setups. I use it with a Vue CLI generated project (using webpack on the background) without any issues. Check the following project, maybe it will help you with your setup:

• https://github.com/JoseGoncalves/vue-google-maps

[web-programmer-here]

@JoseGoncalves Thanks, yeah this one uses Vue CLI, Husam had a demo with Vue CLI too that worked but something with the webpack when building the project using webpack --mode production

[HusamElbashir]

@web-programmer-here I'd try inspecting the webpack config of a standard Vue CLI project and see if you have something misconfigured: https://cli.vuejs.org/guide/webpack.html#inspecting-the-project-s-webpack-config

[web-programmer-here]

closing this as I decided to use Vue CLI