capacitor-community / capacitor-community/google-maps
feat(MarkerPreferences): allow custom interactive infowindow by providing HTMLElements to snippet
- Dominant language
- Java
- Stars
- 161
- Forks
- 65
- PR merge metrics
- No merged PRs in 30d
Description
**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](https://iosrevisited.blogspot.com/2019/12/custom-marker-custom-info-window-maps-ios-swift.html)
- [example ](http://kevinxh.github.io/swift/custom-and-interactive-googlemaps-ios-sdk-infowindow.html)for interactive ios InfoWindow.
- Also for android there is some similar [approach](https://pick8chu.github.io/android_custom_infowindow_for_google_map.html)
**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**
```html
```
**Example Event Listener**
```typescript
//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.
Contributor guide
Research direction
Start by tracing MarkerPreferences and the snippet handling across the Android and iOS Google Maps SDK integrations, then review the CapacitorGoogleMaps.didTapSnippet entry point. Done would require agreeing on the HTMLElement or multiple-item API, sizing and scrolling behavior, WebView interaction, and click-event payload for both platforms.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- html, java, swift, typescript
- Domain
- frontend, mobile
- Issue type
- Feature
- Difficulty
- 5/5
- Estimated time
- Over a week
- Activity status
- Stale
- Clarity
- Needs clarification
- Newbie friendliness
- 25/100