ionic-team / ionic-team/ionic-native-google-maps

Can't display multiple HtmlInfoWindow

Open
#342 3 comments 0 reactions 0 assignees View on GitHub
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**
![WhatsApp Image 2020-11-06 at 4 38 49 PM (1)](https://user-images.githubusercontent.com/2413388/98385107-e7987b80-204e-11eb-99b2-e0187defc01a.jpeg)

**what i get**
![WhatsApp Image 2020-11-06 at 5 00 11 PM](https://user-images.githubusercontent.com/2413388/98387454-b0779980-2051-11eb-82f8-204982cdcd50.jpeg)

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

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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.