It doesn't show the map when I try to show the map in a modal

[KevinToala]

Describe the bug
We want to migrate to capacitor-community/google-maps in our project with Angular/Ionic/Capacitor and currently in our UX flow we have a modal that opens so the user can select an address. But we have a problem with this plugin or maybe we are understanding or doing things wrong, but we can't show the map in the modal, if we do it on a page view there is no problem, but in the modal we can't do it anymore which looks like the map is displayed below the modal and the page that opened the modal. What options we have ?

To Reproduce
Steps to reproduce the behavior:
Open a modal and try to add the map, it will not be visible in the modal but if we put "--background: transparent" to the modal and to the page it is shown, but it hides all the content of the page and the modal

Expected behavior
That the map can be used in a modal

[kristianfjelde]

From the documentation:

The Map instances are rendered behind the WebView. Because of this, it should be made sure the native WebView and the concerned HTMLElements inside it, are transparent.

As of what I understand from this, the map cannot (as of now) be placed on HTML Elements such as a modal. Instead you will have to make the modal and the page beneath transparent and resize the map in the background with theboundingRect options with sizes of your modal. Probably not so convenient, maybe we can hope for support for HTML Elements in the future.

[KevinToala]

Hi @kristianfjelde,

We tried to do what you tell us but it required making many style changes and it didn't look quite right. Many changes to be able to display a map. The plugin with the new update looks pretty good. But having to change the flow and user experience that we have developed for this limit may not be a good option at the moment. Is it known if in the future it will have support for html elements?

[kristianfjelde]

I do fully agree with you that the way of having the map behind the WebView is a sub-optimal and limiting solution in terms of flow and UX. From my perspective I dont see how they will be able to support HTML element by this approach, but maybe some of the maintainers can describe it futhermore.

[tafelnl]

If we would not render the map behind the webview, you would not be able to customize it, in the sense of adding additional HTMLElements on top of the map. You can read more about this in the docs (here for example).

Of course we could consider adding support for rendering a map on top of the webview instead. But that's not really what this issue is about. But we could start another issue for that.

---

On a sidenote: using this plugin in a modal sounds like an unusual use-case. Just to make sure: did you read the Should you use this plugin? section of the docs?

[tafelnl]

@kristianfjelde

From my perspective I dont see how they will be able to support HTML element by this approach, but maybe some of the maintainers can describe it futhermore.

I am not sure what you mean by this.

If you mean that we cannot support HTMLElements overlaying the mapview: in fact, it is the exact opposite. By rendering the map behind the webview, we have the ability to overlay the map with everything that's in the webview.

If you mean that we do not support attaching the mapview to specific HTMLElements but to their boundingrect coordinates instead: yeah that's correct. That's something that we like to change. But since scrolling* is not supported yet, it wouldn't really make sense to implement it right now anyway.

* Issue about scrolling: #7 Discussion about scrolling: #137

If you mean something else, could you please specify? :)

[kristianfjelde]

If you mean that we do not support attaching the mapview to specific HTMLElements but to their boundingrect coordinates instead: yeah that's correct.

Yes, this is exactly what I meant :)

[KevinToala]

Si no representamos el mapa detrás de la vista web, no podrá personalizarlo, en el sentido de agregar HTMLElements adicionales en la parte superior del mapa. Puede leer más sobre esto en los documentos ( aquí, por ejemplo).

Por supuesto, podríamos considerar agregar soporte para representar un mapa en la parte superior de la vista web. Pero eso no es realmente de lo que se trata este problema. Pero podríamos empezar otro número para eso.

En una nota al margen: usar este complemento en un modal suena como un caso de uso inusual. Solo para asegurarme: ¿leíste el artículo ¿Deberías usar este complemento? sección de los documentos?

Hi @tafelnl

Basically we have a delivery application (for example like uber eats) and before the user creates his order he can select or change the delivery address. So here, to prevent you from leaving the order creation page, a modal opens that allows you to search for addresses with google place or select a point on the map. We currently do this with the google maps javascript sdk, but we're past the $200 free tier and the costs for using google maps are starting to get steep. This is when we tried to migrate to this plugin, but we would have to change our user experience drastically.
Perhaps it is a good option to allow us to choose whether or not we want to overlay the map, meanwhile for high cost savings of google maps I think we will have to migrate to other map options :/

[tafelnl]

I opened an issue (#161) that documents the feature of rendering of a mapview instance on top of the webview. Therefore I will close this issue.