at marker click, map moves to marker but not open htmlInfoWindow
leabdalla opened this issue · 1 comments
leabdalla commented
I'm using Ionic 4 and it was working fine before a few updates on composer.json.
I'm not sure what exactly caused the problems.
When I click at map markers, the map moves to marker but the htmlInfoWindow is not showing up.
Here is part of the code I'm using
import {
GoogleMaps,
GoogleMap,
GoogleMapsEvent,
GoogleMapsMapTypeId,
LatLng,
MarkerOptions,
Marker,
HtmlInfoWindow,
} from "@ionic-native/google-maps";
...
redrawMap(){
console.log('redrawMap()');
if(!this.map || this.places.length <= 0) return;
let self = this;
let map = this.map;
map.clear();
this.markers = [];
this.windows = [];
this.places.forEach(function(place){
let place_id = place['id'];
let _place = place;
let markerOptions:MarkerOptions = {
icon : ((place.is_open_now) ? "assets/pins/pin-green.png" : "assets/pins/pin-gray.png"),
position : new LatLng(place.pin_lat, place.pin_long),
};
let htmlInfoWindow = new HtmlInfoWindow();
let frame = document.createElement('div');
frame.innerHTML = `
<div>
<font color="#4A4798">
<b>`+place.title+`</b>
</font>
</div>
`;
htmlInfoWindow.setContent(frame, {width:"260px", height:"145px"});
self.windows.push(htmlInfoWindow);
console.log('lets add Marker'); //////////////////////////////////// THIS MESSAGE APPEARS IN CONSOLE
let marker = map.addMarker(markerOptions).then((mark:Marker) => {
console.log('marker added'); ///////////////////////////////////// THIS MESSAGE DOES NOT APPEAR IN CONSOLE
map.on(GoogleMapsEvent.MAP_CLICK).subscribe(() => {
console.log('GoogleMapsEvent.MAP_CLICK');
htmlInfoWindow.close();
});
mark.on(GoogleMapsEvent.MARKER_CLICK).subscribe(() => {
console.log('GoogleMapsEvent.MARKER_CLICK');
console.log(htmlInfoWindow);
htmlInfoWindow.open(mark);
});
self.markers.push({id_lote:place_id, marker:mark});
});
});
}
Am I doing something wrong?
And here is my package.json file
{
"name": "xxxx",
"version": "0.0.1",
"author": "Ionic Framework",
"homepage": "https://ionicframework.com/",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
},
"private": true,
"dependencies": {
"@angular/common": "~8.1.2",
"@angular/core": "~8.1.2",
"@angular/forms": "~8.1.2",
"@angular/platform-browser": "~8.1.2",
"@angular/platform-browser-dynamic": "~8.1.2",
"@angular/router": "~8.1.2",
"@ionic-native/app-rate": "^5.19.0",
"@ionic-native/app-version": "^5.17.1",
"@ionic-native/badge": "^5.17.1",
"@ionic-native/barcode-scanner": "^5.17.1",
"@ionic-native/clipboard": "^5.31.1",
"@ionic-native/core": "^5.0.0",
"@ionic-native/device": "^5.19.1",
"@ionic-native/diagnostic": "^5.17.1",
"@ionic-native/firebase": "^5.28.0",
"@ionic-native/firebase-x": "^5.18.0",
"@ionic-native/geolocation": "^5.36.0",
"@ionic-native/google-maps": "^5.0.0-beta.27",
"@ionic-native/in-app-browser": "^5.29.0",
"@ionic-native/keyboard": "^5.19.1",
"@ionic-native/launch-navigator": "^5.19.1",
"@ionic-native/network": "^5.17.1",
"@ionic-native/screen-orientation": "^5.17.1",
"@ionic-native/splash-screen": "^5.17.1",
"@ionic-native/status-bar": "^5.17.1",
"@ionic-native/unique-device-id": "^5.19.0",
"@ionic/angular": "^4.7.1",
"@ionic/storage": "^2.2.0",
"colors": "1.4.0",
"cordova-android": "^8.1.0",
"cordova-browser": "^6.0.0",
"cordova-clipboard": "^1.3.0",
"cordova-plugin-actionsheet": "^2.3.3",
"cordova-plugin-androidx": "^1.0.2",
"cordova-plugin-androidx-adapter": "^1.1.0",
"cordova-plugin-app-version": "^0.1.9",
"cordova-plugin-apprate": "^1.5.0",
"cordova-plugin-badge": "^0.8.8",
"cordova-plugin-compat": "^1.2.0",
"cordova-plugin-device": "^2.0.2",
"cordova-plugin-dialogs": "^2.0.2",
"cordova-plugin-firebase": "^2.0.5",
"cordova-plugin-firebasex": "^7.0.1",
"cordova-plugin-googlemaps": "^2.6.2",
"cordova-plugin-inappbrowser": "^4.0.0",
"cordova-plugin-ionic-keyboard": "^2.2.0",
"cordova-plugin-ionic-webview": "^4.1.3",
"cordova-plugin-nativestorage": "^2.3.2",
"cordova-plugin-network-information": "^2.0.2",
"cordova-plugin-screen-orientation": "^3.0.2",
"cordova-plugin-splashscreen": "^5.0.2",
"cordova-plugin-statusbar": "~2.4.2",
"cordova-plugin-whitelist": "~1.3.3",
"cordova-support-android-plugin": "^1.0.1",
"cordova-support-google-services": "^1.3.2",
"cordova-unique-device-id": "^1.3.2",
"cordova.plugins.diagnostic": "^5.0.1",
"core-js": "^2.5.4",
"es6-promise-plugin": "^4.2.2",
"faker": "5.5.3",
"ionicons": "git://github.com/ionic-team/ionicons.git#3.0",
"ios-sim": "^8.0.2",
"ngx-mask-ionic": "^1.1.2",
"rxjs": "~6.5.1",
"rxjs-compat": "^6.5.3",
"terser": "3.14.1",
"tslib": "^1.9.0",
"uk.co.workingedge.phonegap.plugin.launchnavigator": "^5.0.4",
"zone.js": "~0.9.1"
},
"devDependencies": {
"@angular-devkit/architect": "~0.801.2",
"@angular-devkit/build-angular": "^0.803.25",
"@angular-devkit/core": "~8.1.2",
"@angular-devkit/schematics": "~8.1.2",
"@angular/cli": "~8.1.2",
"@angular/compiler": "~8.1.2",
"@angular/compiler-cli": "~8.1.2",
"@angular/language-service": "~8.1.2",
"@ionic/angular-toolkit": "^2.1.1",
"@types/jasmine": "~3.3.8",
"@types/jasminewd2": "~2.0.3",
"@types/node": "~8.9.4",
"codelyzer": "^5.0.0",
"cordova-ios": "^5.1.1",
"cordova-plugin-device": "^2.0.2",
"cordova-plugin-geolocation": "^4.1.0",
"cordova-plugin-ionic-keyboard": "^2.2.0",
"cordova-plugin-splashscreen": "^5.0.2",
"cordova-plugin-statusbar": "^2.4.2",
"cordova-plugin-whitelist": "^1.3.3",
"jasmine-core": "~3.4.0",
"jasmine-spec-reporter": "~4.2.1",
"karma": "~4.1.0",
"karma-chrome-launcher": "~2.2.0",
"karma-coverage-istanbul-reporter": "~2.0.1",
"karma-jasmine": "~2.0.1",
"karma-jasmine-html-reporter": "^1.4.0",
"phonegap-plugin-barcodescanner": "^8.1.0",
"protractor": "~5.4.0",
"ts-node": "~7.0.0",
"tslint": "~5.15.0",
"typescript": "~3.4.3"
},
"description": "An Ionic project",
"cordova": {
"plugins": {
"cordova-plugin-whitelist": {},
"cordova-plugin-statusbar": {},
"cordova-plugin-device": {},
"cordova-plugin-splashscreen": {},
"cordova-plugin-ionic-keyboard": {},
"cordova-plugin-app-version": {},
"cordova-plugin-network-information": {},
"cordova-plugin-screen-orientation": {},
"cordova.plugins.diagnostic": {
"ANDROID_SUPPORT_VERSION": "28.+"
},
"cordova-plugin-badge": {},
"cordova-plugin-firebasex": {
"FIREBASE_ANALYTICS_COLLECTION_ENABLED": "true",
"FIREBASE_PERFORMANCE_COLLECTION_ENABLED": "true",
"FIREBASE_CRASHLYTICS_COLLECTION_ENABLED": "true",
"ANDROID_ICON_ACCENT": "#FF00FFFF",
"ANDROID_PLAY_SERVICES_TAGMANAGER_VERSION": "17.0.0",
"ANDROID_FIREBASE_ANALYTICS_VERSION": "17.2.1",
"ANDROID_FIREBASE_MESSAGING_VERSION": "20.0.0",
"ANDROID_FIREBASE_CONFIG_VERSION": "19.0.3",
"ANDROID_FIREBASE_PERF_VERSION": "19.0.1",
"ANDROID_FIREBASE_AUTH_VERSION": "19.1.0",
"ANDROID_CRASHLYTICS_VERSION": "2.10.1",
"ANDROID_CRASHLYTICS_NDK_VERSION": "2.1.1"
},
"cordova-plugin-androidx-adapter": {},
"cordova-plugin-ionic-webview": {
"ANDROID_SUPPORT_ANNOTATIONS_VERSION": "27.+"
},
"cordova-plugin-apprate": {
"PLAY_CORE_VERSION": "1.+"
},
"uk.co.workingedge.phonegap.plugin.launchnavigator": {
"GOOGLE_API_KEY_FOR_ANDROID": "xxxx-xv36Lays",
"OKHTTP_VERSION": "3.12.0",
"LOCATION_USAGE_DESCRIPTION": "Veja estabelecimentos mais próximos de você com dinheiro de volta"
},
"cordova-plugin-googlemaps": {
"API_KEY_FOR_ANDROID": "xxxx-xv36Lays",
"API_KEY_FOR_IOS": "xxx-xv36Lays",
"PLAY_SERVICES_VERSION": "15.0.1",
"ANDROID_SUPPORT_V4_VERSION": "27.+",
"LOCATION_WHEN_IN_USE_DESCRIPTION": "Somente utilizamos a sua localização quando o app estiver aberto",
"LOCATION_ALWAYS_USAGE_DESCRIPTION": "This app wants to get your location always, even this app runs in background."
},
"cordova-plugin-androidx": {},
"cordova-unique-device-id": {},
"cordova-plugin-inappbrowser": {},
"cordova-clipboard": {},
"cordova-plugin-geolocation": {
"GPS_REQUIRED": "true"
},
"phonegap-plugin-barcodescanner": {
"ANDROID_SUPPORT_V4_VERSION": "27.+"
}
},
"platforms": [
"browser",
"android",
"ios"
]
}
}
leabdalla commented
solved by setting marker icon width and height 🤷🏻♂️