capacitor-community / capacitor-community/google-maps

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

Open
#162 3 comments 4 reactions 0 assignees View on GitHub
enhancement
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


Apple Store

Primark

Drugstore


```

**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

Open the contributing 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.