feat(MarkerPreferences): allow custom interactive infowindow by providing HTMLElements to snippet

[DwieDima]

Is your feature request related to a problem? Please describe.
Currently, the snippet attribute of a marker can only be used to specify a string, which is displayed above the markers (infowindow).
It is currently not possible to display complex infowindows with individual styling.
Furthermore, the Infowindow should allow interaction.

Does this feature exist in the Google Maps SDK for android and iOS? Please link the documentation for this feature.

• for ios native i found that you can create a custom UIView
• example for interactive ios InfoWindow.
• Also for android there is some similar approach

Describe the solution you'd like

• the snippet property of marker should accept string or HTMLElement
• it should be possible to provide multiple items to snippet.
  • example: one marker represents a shopping store. Inside that shopping store there are multiple stores. By clicking that marker i would expect to see a list of these stores.
• the infowindow should be scrollable.
• the infowindow should adapt the width and height of provided HTMLElement.
• there should be an event listener which emit on infowindow click.
  • this event listener should output the clicked HTMLElement id (for instance "apple-store"), so you know which of the items were clicked. For an example please see below.

Example HTMLElement

<div style="width: 200px; height: 500px; padding: 20px; border-radius: 10px">
   <div id="apple-store" style="margin: 5px 0px; height: 60px: text-align: center">Apple Store</div>
    <div id="primark" style="margin: 5px 0px; height: 60px: text-align: center">Primark</div>
    <div id="drugstore" style="margin: 5px 0px; height: 60px: text-align: center">Drugstore</div>
</div>

Example Event Listener

//click the first item in HTMLInfoWindow (apple-store)
CapacitorGoogleMaps.didTapSnippet((id) => { 
   // "apple-store"
  console.log(id)
} )

Additional context

Since we cannot use native elements like the links described above i think it should be possible to render a custom WebView inside the InfoWindow.

[tafelnl]

Is there any specific reason that you don't use a 'normal' HTMLElement for this? The plugin allows for overlaying the mapview with anything in the webview. So you could just show a modal like you would show a 'normal' modal in your application. This has the benefit of not having to recreate a HTMLElement with all of its styling. Also the event listeners are more straight forwards, as you can just use the event listener architecture of the framework of your like (vanilla JS, Vue, React, Angular)

[DwieDima]

Yes this would also be a solution. I could use a ion-popover.
In my use-case i want to display the InfoWindow directly above the marker with carret on bottom.
Using HTMLElements on the framework-side require me to know which position the marker is (x: number, y: number) to display my own InfoWindow on top of the marker.

Currently when i listen for didMarkerTap() i'll get a DidTapMarkerResult which returns the Marker object.
Here i only have access to position of type LatLng which i cannot use to determine where the marker is located inside my div

[va2ron1]

This could be an easy solution, a least for iOS. On iOS every UI element has access to accessibilityActivationPoint and from there you can send here the position of the marker from the map view. Also you can get the marker icon position using the iconView and send this instead.

Note: You already know the location and size of the map view because you need the element/container and the size to create the map. Placing the elements over is easy knowledge.