search

inocan-group / vue3-google-map

A set of composable components for easy use of Google Maps in your Vue 3 projects.
https://vue3-google-map.com
MIT License
280 stars 57 forks source link

Loading multiple maps in an SPA fails #31

Closed JamieMcDonnell closed 3 years ago

JamieMcDonnell commented 3 years ago

I am loading one map component in my main page, and when I try to open a drilldown (modal popup, overlay etc) with a second map component in I get the following error:

runtime-core.esm-bundler.js:38 [Vue warn]: Unhandled error during execution of setup function 
  at <GoogleMap ref="newMap" style= 
{width: "100%", height: "100%"}
height: "100%"
width: "100%"
__proto__: Object
 center= 
{lat: 38.017922, lng: -95.494064}
lat: 38.017922
lng: -95.494064

and

Uncaught (in promise) Error: Loader must not be called again with different options. {"version":"weekly","apiKey":"AIzaSyDePtID2AxWnYcPJdCKTZd9b0jRIOrrj4E","id":"__googleMapsScriptId","libraries":["places"],"url":"https://maps.googleapis.com/maps/api/js"} !== {"version":"weekly","apiKey":"AIzaSyDePtID2AxWnYcPJdCKTZd9b0jRIOrrj4E","id":"__googleMapsScriptId","libraries":["drawing"],"url":"https://maps.googleapis.com/maps/api/js"}
    at new u (index.js:19)
    at setup (index.js:32)
    at callWithErrorHandling (runtime-core.esm-bundler.js:154)
    at setupStatefulComponent (runtime-core.esm-bundler.js:6456)
    at setupComponent (runtime-core.esm-bundler.js:6417)
    at mountComponent (runtime-core.esm-bundler.js:4124)
    at processComponent (runtime-core.esm-bundler.js:4100)
    at patch (runtime-core.esm-bundler.js:3718)
    at componentEffect (runtime-core.esm-bundler.js:4216)
    at reactiveEffect (reactivity.esm-bundler.js:42)
u @ index.js:19
setup @ index.js:32
callWithErrorHandling @ runtime-core.esm-bundler.js:154
setupStatefulComponent @ runtime-core.esm-bundler.js:6456
setupComponent @ runtime-core.esm-bundler.js:6417
mountComponent @ runtime-core.esm-bundler.js:4124
processComponent @ runtime-core.esm-bundler.js:4100
patch @ runtime-core.esm-bundler.js:3718
componentEffect @ runtime-core.esm-bundler.js:4216
reactiveEffect @ reactivity.esm-bundler.js:42
effect @ reactivity.esm-bundler.js:17
setupRenderEffect @ runtime-core.esm-bundler.js:4181
mountComponent @ runtime-core.esm-bundler.js:4140
processComponent @ runtime-core.esm-bundler.js:4100
patch @ runtime-core.esm-bundler.js:3718
mountChildren @ runtime-core.esm-bundler.js:3900
mountElement @ runtime-core.esm-bundler.js:3823
processElement @ runtime-core.esm-bundler.js:3795
patch @ runtime-core.esm-bundler.js:3715
mountChildren @ runtime-core.esm-bundler.js:3900
mountElement @ runtime-core.esm-bundler.js:3823
processElement @ runtime-core.esm-bundler.js:3795
patch @ runtime-core.esm-bundler.js:3715
mountChildren @ runtime-core.esm-bundler.js:3900
mountElement @ runtime-core.esm-bundler.js:3823
processElement @ runtime-core.esm-bundler.js:3795
patch @ runtime-core.esm-bundler.js:3715
mountChildren @ runtime-core.esm-bundler.js:3900
mountElement @ runtime-core.esm-bundler.js:3823
processElement @ runtime-core.esm-bundler.js:3795
patch @ runtime-core.esm-bundler.js:3715
mountChildren @ runtime-core.esm-bundler.js:3900
mountElement @ runtime-core.esm-bundler.js:3823
processElement @ runtime-core.esm-bundler.js:3795
patch @ runtime-core.esm-bundler.js:3715
mountChildren @ runtime-core.esm-bundler.js:3900
mountElement @ runtime-core.esm-bundler.js:3823
processElement @ runtime-core.esm-bundler.js:3795
patch @ runtime-core.esm-bundler.js:3715
mountChildren @ runtime-core.esm-bundler.js:3900
mountElement @ runtime-core.esm-bundler.js:3823
processElement @ runtime-core.esm-bundler.js:3795
patch @ runtime-core.esm-bundler.js:3715
mountChildren @ runtime-core.esm-bundler.js:3900
mountElement @ runtime-core.esm-bundler.js:3823
processElement @ runtime-core.esm-bundler.js:3795
patch @ runtime-core.esm-bundler.js:3715
mountChildren @ runtime-core.esm-bundler.js:3900
processFragment @ runtime-core.esm-bundler.js:4060
patch @ runtime-core.esm-bundler.js:3711
mountChildren @ runtime-core.esm-bundler.js:3900
mountElement @ runtime-core.esm-bundler.js:3823
processElement @ runtime-core.esm-bundler.js:3795
patch @ runtime-core.esm-bundler.js:3715
componentEffect @ runtime-core.esm-bundler.js:4216
reactiveEffect @ reactivity.esm-bundler.js:42
effect @ reactivity.esm-bundler.js:17
setupRenderEffect @ runtime-core.esm-bundler.js:4181
mountComponent @ runtime-core.esm-bundler.js:4140
processComponent @ runtime-core.esm-bundler.js:4100
patch @ runtime-core.esm-bundler.js:3718
mountChildren @ runtime-core.esm-bundler.js:3900
mountElement @ runtime-core.esm-bundler.js:3823
processElement @ runtime-core.esm-bundler.js:3795
patch @ runtime-core.esm-bundler.js:3715
componentEffect @ runtime-core.esm-bundler.js:4216
reactiveEffect @ reactivity.esm-bundler.js:42
effect @ reactivity.esm-bundler.js:17
setupRenderEffect @ runtime-core.esm-bundler.js:4181
mountComponent @ runtime-core.esm-bundler.js:4140
processComponent @ runtime-core.esm-bundler.js:4100
patch @ runtime-core.esm-bundler.js:3718
mountChildren @ runtime-core.esm-bundler.js:3900
mountElement @ runtime-core.esm-bundler.js:3823
processElement @ runtime-core.esm-bundler.js:3795
patch @ runtime-core.esm-bundler.js:3715
mountChildren @ runtime-core.esm-bundler.js:3900
mountElement @ runtime-core.esm-bundler.js:3823
processElement @ runtime-core.esm-bundler.js:3795
patch @ runtime-core.esm-bundler.js:3715
componentEffect @ runtime-core.esm-bundler.js:4216
reactiveEffect @ reactivity.esm-bundler.js:42
effect @ reactivity.esm-bundler.js:17
setupRenderEffect @ runtime-core.esm-bundler.js:4181
mountComponent @ runtime-core.esm-bundler.js:4140
processComponent @ runtime-core.esm-bundler.js:4100
patch @ runtime-core.esm-bundler.js:3718
componentEffect @ runtime-core.esm-bundler.js:4216
reactiveEffect @ reactivity.esm-bundler.js:42
effect @ reactivity.esm-bundler.js:17
setupRenderEffect @ runtime-core.esm-bundler.js:4181
mountComponent @ runtime-core.esm-bundler.js:4140
processComponent @ runtime-core.esm-bundler.js:4100
patch @ runtime-core.esm-bundler.js:3718
mountChildren @ runtime-core.esm-bundler.js:3900
mountElement @ runtime-core.esm-bundler.js:3823
processElement @ runtime-core.esm-bundler.js:3795
patch @ runtime-core.esm-bundler.js:3715
mountChildren @ runtime-core.esm-bundler.js:3900
mount @ runtime-core.esm-bundler.js:4975
process @ runtime-core.esm-bundler.js:4982
patch @ runtime-core.esm-bundler.js:3721
mountChildren @ runtime-core.esm-bundler.js:3900
processFragment @ runtime-core.esm-bundler.js:4060
patch @ runtime-core.esm-bundler.js:3711
componentEffect @ runtime-core.esm-bundler.js:4286
reactiveEffect @ reactivity.esm-bundler.js:42
callWithErrorHandling @ runtime-core.esm-bundler.js:154
flushJobs @ runtime-core.esm-bundler.js:362
flushJobs @ runtime-core.esm-bundler.js:375
Promise.then (async)
nextTick @ runtime-core.esm-bundler.js:245
prepareTick @ use-tick.js:30
handleShow @ QDialog.js:180
processShow @ use-model-toggle.js:74
processModelChange @ use-model-toggle.js:128
(anonymous) @ use-model-toggle.js:143
callWithErrorHandling @ runtime-core.esm-bundler.js:154
callWithAsyncErrorHandling @ runtime-core.esm-bundler.js:163
hook.__weh.hook.__weh @ runtime-core.esm-bundler.js:1912
flushPostFlushCbs @ runtime-core.esm-bundler.js:333
flushJobs @ runtime-core.esm-bundler.js:369
Promise.then (async)
queueFlush @ runtime-core.esm-bundler.js:264
queueJob @ runtime-core.esm-bundler.js:258
run @ reactivity.esm-bundler.js:183
trigger @ reactivity.esm-bundler.js:189
set value @ reactivity.esm-bundler.js:730
(anonymous) @ Field.vue?a48c:612
Promise.then (async)
setup @ Field.vue?a48c:608
callWithErrorHandling @ runtime-core.esm-bundler.js:154
setupStatefulComponent @ runtime-core.esm-bundler.js:6456
setupComponent @ runtime-core.esm-bundler.js:6417
mountComponent @ runtime-core.esm-bundler.js:4124
processComponent @ runtime-core.esm-bundler.js:4100
patch @ runtime-core.esm-bundler.js:3718
componentEffect @ runtime-core.esm-bundler.js:4286
reactiveEffect @ reactivity.esm-bundler.js:42
callWithErrorHandling @ runtime-core.esm-bundler.js:154
flushJobs @ runtime-core.esm-bundler.js:362
Promise.then (async)
queueFlush @ runtime-core.esm-bundler.js:264
queueCb @ runtime-core.esm-bundler.js:286
queuePreFlushCb @ runtime-core.esm-bundler.js:289
scheduler @ runtime-core.esm-bundler.js:2083
run @ reactivity.esm-bundler.js:183
trigger @ reactivity.esm-bundler.js:189
set value @ reactivity.esm-bundler.js:730
finalizeNavigation @ vue-router.esm-bundler.js:3055
(anonymous) @ vue-router.esm-bundler.js:2928
Promise.then (async)
pushWithRedirect @ vue-router.esm-bundler.js:2899
push @ vue-router.esm-bundler.js:2833
viewFieldDetail @ TFieldDrilldownMenu.ts:36
callWithErrorHandling @ runtime-core.esm-bundler.js:154
callWithAsyncErrorHandling @ runtime-core.esm-bundler.js:163
emit @ runtime-core.esm-bundler.js:620
(anonymous) @ runtime-core.esm-bundler.js:6599
onClick @ QBtn.js:143
callWithErrorHandling @ runtime-core.esm-bundler.js:154
callWithAsyncErrorHandling @ runtime-core.esm-bundler.js:163
invoker @ runtime-dom.esm-bundler.js:301
Show 80 more frames
runtime-core.esm-bundler.js:4169 Uncaught (in promise) TypeError: instance.update is not a function
    at updateComponent (runtime-core.esm-bundler.js:4169)
    at processComponent (runtime-core.esm-bundler.js:4104)
    at patch (runtime-core.esm-bundler.js:3718)
    at patchKeyedChildren (runtime-core.esm-bundler.js:4422)
    at patchChildren (runtime-core.esm-bundler.js:4365)
    at patchElement (runtime-core.esm-bundler.js:3987)
    at processElement (runtime-core.esm-bundler.js:3798)
    at patch (runtime-core.esm-bundler.js:3715)
    at patchKeyedChildren (runtime-core.esm-bundler.js:4422)
    at patchChildren (runtime-core.esm-bundler.js:4365)

The following file: https://github.com/JamieMcDonnell/vue3-google-map/blob/develop/src/components/GoogleMap.vue

Needs to check if google maps api is already loaded, and if so, not create another instance of loader, or clear the current instance before creating a new one.

I would make the changes and create a PR but I am unable to compile your package. Please get in touch and we can work together to make this lib support multiple maps. Thanks

JamieMcDonnell commented 3 years ago

I was able to fix an issue in GoogleMap.vue and get your code to compile, and have modified the component to prevent reloading Google Maps library - I will create a pull request with my changes

yankeeinlondon commented 3 years ago

I have accepted your PR and pushed version 0.7.2. Thanks for the pull request. I will presume this to be closed but let me know if it isn't for some reason.