Description
I'm submitting a ... (check one with "x")
- question
- any problem or bug report
- feature request
If you choose 'problem or bug report', please select OS: (check one with "x")
- Android
- 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 = '<h3>' + element.description + '</h3>';
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);
});
}