ionic-team / ionic-team/ionic-native-google-maps
Can't display multiple HtmlInfoWindow
- Dominant language
- TypeScript
- Stars
- 215
- Forks
- 119
- PR merge metrics
- No merged PRs in 30d
Description
**I'm submitting a ...** (check one with "x")
- [x] question
- [ ] any problem or bug report
- [ ] feature request
**If you choose 'problem or bug report', please select OS:** (check one with "x")
- [x] **Android**
- [x] **iOS**
- [ ] **Browser**
**cordova information:** (run `$> cordova plugin list`)
```
com.googlemaps.ios 3.9.0 "Google Maps SDK for iOS"
cordova-androidx-build 1.0.4 "cordova-androidx-build"
cordova-plugin-app-version 0.1.9 "AppVersion"
cordova-plugin-device 2.0.2 "Device"
cordova-plugin-fcm-with-dependecy-updated 7.3.1 "Cordova FCM Push Plugin"
cordova-plugin-googlemaps 2.8.0-20200709-2008 "cordova-plugin-googlemaps"
cordova-plugin-ionic-keyboard 2.2.0 "cordova-plugin-ionic-keyboard"
cordova-plugin-ionic-webview 4.2.1 "cordova-plugin-ionic-webview"
cordova-plugin-splashscreen 5.0.2 "Splashscreen"
cordova-plugin-statusbar 2.4.2 "StatusBar"
cordova-plugin-whitelist 1.3.3 "Whitelist"
```
**If you use `@ionic-native/google-maps`, please tell the package.json (only `@ionic-native/core` and `@ionic-native/google-maps` are fine mostly)**
"@ionic-native/core": "^5.22.0-beta-1",
"@ionic-native/google-maps": "^5.27.0-beta-20200630",
**Current behavior:**
i'm working on a project and want to add multiple markers to the map ( success on this step) with an htmlinfowindow for each marker , and display all the htmlinfowindows at the same time but i got only the last one displayed
**Expected behavior:**
all the infowindow should be displayed
**Screen capture or video record:**
**what i need**

**what i get**

**Related code, data or error log (please format your code or data):**
**my data**
```
"data": [
{
"lat": "51.3349833",
"lon": "6.0991350",
"description": "0.20 mm"
},
{
"lat": "51.2998667",
"lon": "6.0022533",
"description": "0.00 mm"
},
{
"lat": "51.2201067",
"lon": "5.8785150",
"description": "n/a"
},
{
"lat": "51.1999567",
"lon": "5.7385417",
"description": "0.00 mm"
},
{
"lat": "51.4342617",
"lon": "6.4083933",
"description": "0.20 mm"
},
{
"lat": "44.8447250",
"lon": "19.7638483",
"description": "0.00 mm"
},
{
"lat": "44.8498617",
"lon": "19.7591050",
"description": "0.20 mm"
},
{
"lat": "51.4218050",
"lon": "6.4281983",
"description": "0.00 mm"
},
{
"lat": "51.2840567",
"lon": "5.8748500",
"description": "0.00 mm"
},
{
"lat": "51.4514617",
"lon": "6.2511133",
"description": "0.00 mm"
},
{
"lat": "51.3725017",
"lon": "6.3420100",
"description": "0.00 mm"
},
{
"lat": "51.4214067",
"lon": "6.5314200",
"description": "0.00 mm"
},
{
"lat": "51.3234367",
"lon": "6.3219683",
"description": "n/a"
},
{
"lat": "51.3489817",
"lon": "6.0161033",
"description": "0.00 mm"
},
{
"lat": "51.3097983",
"lon": "6.0484950",
"description": "0.00 mm"
}
]
```
**function to init the MAP**
```
async loadMap(lat, lng) {
let mapOptions: GoogleMapOptions = {
mapType: GoogleMapsMapTypeId.SATELLITE,
controls: {
'compass': true,
'myLocationButton': false,
'myLocation': false, // (blue dot)
'indoorPicker': false,
'zoom': true, // android only
'mapToolbar': true // android only
},
gestures: {
scroll: true,
tilt: true,
zoom: true,
rotate: false
},
camera: {
target: {
lat: lat,
lng: lng
},
zoom: 12,
tilt: 30
}
};
this.map4 = GoogleMaps.create('map4', mapOptions);
}
```
**function to add markers**
```
async add_markers_tomap(data) {
this.map4.clear();
data.forEach(async (element) => {
let htmlInfoWindow = new HtmlInfoWindow();
let frame: HTMLElement = document.createElement('div');
let text = '
' + element.description + '
';frame.innerHTML = [
text
].join("");
htmlInfoWindow.setContent(frame, {
width: "100px",
height: "150px"
});
const marker = await this.map4.addMarker({
position: { lat: element.lat, lng: element.lon },
title: element.description,
icon: {
url: "./assets/imgs/marker.png",
size: {
width: 30,
height: 43
}
},
animation: 'DROP'
})
// Without clicking icon additionally
htmlInfoWindow.open(marker);
});
}
```
Contributor guide
Research direction
Start with the add_markers_tomap function and its HtmlInfoWindow.open calls, using the supplied marker data to reproduce the behavior on Android and iOS. Compare the displayed result with the expected screen capture and determine what behavior the plugin supports; done means the documented multiple-window expectation is either met or clearly accounted for.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- html, typescript
- Domain
- mobile-dev
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100