Bug: Does not work with multiple maps on the same page

[recrit]

Please complete all sections that you can but please don't remove any section, otherwise the bot will close your issue because it doesn't meet our issue template (you can remove this comment)

Describe the bug

When there are two or more Vue apps using the gmap-vue plugins on the same page, the gmap-vue marker-icon and info-window components use the first map on the page only.

For the map-layer: I had to set the "recycle" property so that two Google map objects were actually created in the window object. This is because the plugin uses a "recycle key" that defaults to the same "gmc" for all maps when the "recycle" property is not set.

For the marker-icon: If set the map-layer "recycle" property to a unique value and I explicitly set the marker options.map property to the value of the global window[mapRef.getRecycleKey()], then the markers will show on the correct map. If you do not do this, then all of the markers will show on the first map that is on the page.

For the info-window: There was no workaround to for the correct map object since the InfoWindowOpenOptions are not exposed. Clicking the marker on the second map will open the info window on the first map.

My specific use case: I attempted to debug the plugin and disabled any custom code that might conflict, but the bug still exists. I was previously using the vue2-google-maps 0.10.7 plugin with Vue2 and had no issues when there were multiple maps on the page. I am working on upgrading the apps to Vue 3 with the gmap-vue gmv3_v1.0.3 plugin.

To reproduce

Steps to reproduce the behavior:

1. Install the Vue 3 plugin: npm install @gmap-vue/v3
2. Create two Vue apps on the same page.
3. Set different markers for each of the maps.
4. Bug observed: All of the markers are placed on the first map.

Expected behavior

Multiple maps on a single page should work independently of each other.

Current behavior

When there are multiple maps on the page, only the first map is updated.

Screenshots

N/A

Desktop (please complete the following information)

• OS: macOs 13.6.1
• Browser Chrome
• Version 120.0.6099.71

Smartphone (please complete the following information)

Not tested.

• Device: [e.g. iPhone6]
• OS: [e.g. iOS8.1]
• Browser [e.g. stock browser, safari]
• Version [e.g. 22]

Additional context

None.

Versions

• Node: v18.17.0
• NPM:
• Yarn: 1.22.19

Package manager

• [ ] NPM
• [x] Yarn

Plugin version

• [x] gmv3_v1.0.3

[recrit]

For my situation, I was able to switch to another plugin (https://github.com/NathanAP/vue-google-maps-community-fork). The "vue-google-maps-community-fork" is working as expected since it correctly associates the marker and info windows with the parent map.

[basuneko]

Yes, having the same issue as well. In my case there are two separate routes, each with its own map. When switching between the routes, markers don't seem to clear.

I haven't dug too deep into this but it looks like the issue might be in the useMapPromise composable - the returned promise is a singleton and contains the instance of the map and it seems to always be the first instance. Map components (Marker, Polyline) inject that promise and, in turn, share the same map instance.

// My map wrapper
onMounted(() => {
  composables.useMapPromise().then((map) => {
    console.log(map?.recycle);
  });

// Page
<MapWrapper recycle="map-1" />
<MapWrapper recycle="map-2" />

I expect to see map-1, map-2 in the console. But instead I get map-1 twice.

[create-issue-branch[bot]]

Branch issue-309-Bug_Does_not_work_with_multiple_maps_on_the_same_page created!

[jacobg]

It seems like the recycle option needs to be set in order to recycle at all, else it would create a new Google map instance each time. So not sure why you would have this issue if `recycle is not set: https://github.com/diegoazh/gmap-vue/blob/ebdaf43db847e0054d420d5ca0d1c1f88ca6ecc3/packages/v3/src/components/map-layer.vue#L301-L308

[diegoazh]

Hi there, could you test our new version v2.0.0? also, you can find the main points on our new documentation site.

[nate998877]

I'm just popping in to say that on v2.0.1 using the gmv-map component w/ mapId set to a unique value I am not able to have multiple maps per page. I do have some custom code that may interfere, but I don't think it's likely to affect it. I will see about generating a minimal replication when I have the time to dedicate.

[diegoazh]

I'm just popping in to say that on v2.0.1 using the gmv-map component w/ mapId set to a unique value I am not able to have multiple maps per page. I do have some custom code that may interfere, but I don't think it's likely to affect it. I will see about generating a minimal replication when I have the time to dedicate.

Yes, I found the issue and I'm working on the fix. Currently, all the tests passed and I'm trying to improve something related to the street view component but if that requires more time I'll land the fix in two days a guess with documentation, and after that the improvement on the street view component.

Thank you so much to @recrit for reporting this bug and for explaining this in detail.

[diegoazh]

@basuneko @jacobg @recrit @nate998877 The new version has landed 🎉, please test it and follow the documentation to use it correctly. Here you can find an example on stackblitz, please remember to set your Google API key on the .env file.

[diegoazh]

I'm going to close the issue but, feel free to re-open it if it's needed.

[nate998877]

After testing I can confirm this is working as expected. Thanks for all your hard work!