how show dialog when fullscreen?

[darlandieterich]

how show dialog when fullscreen?

[tsworman]

@darlandieterich Which dialog are you talking about? When the map is full screen I was able to show the infowindow popup by changing the z setting for it. Are you sure you aren't running into a similar issue?

[darlandieterich]

Hi, sorry so missing about this question. I'm using element.io components "el-dialog" this is pop-up. When press fullscreen mode of map, i'm click in mark button this don't show the "dialog", the "z-index" for component GmapMap don't have effect. When mode fullscreen don't active, this work fine.

dialog = z-index: 9999 map = z-index: 100

[CHOMNANP]

Hi, sorry so missing about this question. I'm using element.io components "el-dialog" this is pop-up. When press fullscreen mode of map, i'm click in mark button this don't show the "dialog", the "z-index" for component GmapMap don't have effect. When mode fullscreen don't active, this work fine.

dialog = z-index: 9999 map = z-index: 100

Same issue. How you get this resolve?

[NivyaPallempati]

Hi, sorry so missing about this question. I'm using element.io components "el-dialog" this is pop-up. When press fullscreen mode of map, i'm click in mark button this don't show the "dialog", the "z-index" for component GmapMap don't have effect. When mode fullscreen don't active, this work fine.

dialog = z-index: 9999 map = z-index: 100

Hi, Facing the same issue. Any possible solution?

Thanks.

[aefika]

After several tries with a similar problem, and a lot of research, here is my solution for vueJs.

Couple things to know: A. When you use the fullscreen, basically you loose control because there is a new element the google creates that has its own style. So you have to append your component (or dialog) into that element. https://stackoverflow.com/questions/55657163/how-to-float-a-div-over-google-maps-and-keep-it-in-fullscreen

B. It is important to detect when you go full screen based on existing Gmap methods: https://stackoverflow.com/questions/39620850/google-maps-api-v3-how-to-detect-when-map-changes-to-full-screen-mode

Here is my solution:

1. First, add a method to detect full screen (only showing the lines I added, not the whole code):

`<GmapMap ref="mapRef" ... @bounds_changed="detectFullScreeen"

`

2. Use a ref for the map, and a ref for the dialog you want to show when full screen. Also you need a class that add some z-index, 1 can work, the max can work, in my case, I use TailwindCSS z-50. It's important to notice that the component needs to exist when map goes to full screen, so I had to change v-if condition to prop show in order to have the element present.

<AssetUse ref="assetUseModal" class="z-50" :show="showCloseActivityModal" ... />

3. Append the component when going full screen:

` detectFullScreeen() {

            this.$refs.mapRef.$mapPromise.then((GmapInstance) => {

                let gmapElement = GmapInstance.getDiv();
                let fullscreenDiv = gmapElement.firstChild;

                if (fullscreenDiv.offsetHeight == window.innerHeight && fullscreenDiv.offsetWidth  == window.innerWidth ) {
                    // When detecting full screen, the new Gmap full screen division will have the modals attached in order to show
                    fullscreenDiv.appendChild(this.$refs.assetUseModal.$el);                        
                } else {
                    // Map changed, not not in full screen
                    // No action in this case
                }

            })
        }

`

[khemiiandrii]

If it can help someone - Google map have infowindow, witch can help show info, and this component perfect working when fullscreen. https://developers.google.com/maps/documentation/javascript/infowindows