ionic-team / ionic-team/capacitor-google-maps
Google Maps: Add custom data for markers
- Dominant language
- TypeScript
- Stars
- 32
- Forks
- 47
- PR merge metrics
- No merged PRs in 30d
Description
## Feature Request
### Plugin
Google Maps
### Description
Often devs need to add custom data (a specific database entry ID, etc.) to markers and receive them when the marker is clicked. E.g. an entry id to load more details from an API for the clicked marker dynamically.
This [stackoverflow reply](https://stackoverflow.com/a/11378539/809939) suggests three ways for adding `customInfo` to markers:
```javascript
var markerA = new google.maps.Marker({
map: map,
position: new google.maps.LatLng(0, 0),
customInfo: "Marker A"
});
var markerB = new google.maps.Marker({
map: map,
position: new google.maps.LatLng(-10, 0)
});
markerB.customInfo = "Marker B";
var markerC = new google.maps.Marker({
map: map,
position: new google.maps.LatLng(-20, 0)
});
markerC['customInfo'] = "Marker C";
```
### Platform(s)
All
### Preferred Solution
Add option like `customData:{}`which can be appended to `map.addMarker()`.
When the marker is clicked, it will be transmitted here:
```javascript
async setMarkerListeners(
mapId: string,
markerId: string,
marker: google.maps.Marker,
): Promise {
marker.addListener('click', () => {
this.notifyListeners('onMarkerClick', {
...
title: marker.getTitle(),
customData: marker.getCustomData()
});
});
}
```
https://github.com/ionic-team/capacitor-plugins/blob/main/google-maps/src/web.ts#L319
I'm not a typescript pro yet, guess there need to be some modifications on other files as well.
### Alternatives
Storing marker IDs and connect them with custom data in JS (marker manager).
### Additional Context
Related to https://github.com/ionic-team/capacitor-plugins/issues/1133
Thx very much in advance for looking into this!
Contributor guide
Assessment
This issue has not been assessed yet.