Hello everyone,
I am creating an app that has a page where multiple markers are displayed with dynamic popups using htmlinfowindow. The problem that i am encountering is that i i want to add a button to the htmlinfowindow so when i click it i get navigated to another page.
I tried using the example given here :
@ionic-native / google-maps Cordova GoogleMaps plugin project Masashi Katsumata
The example given in the above document did not work maybe because there is only one marker added and in my example i use clusters.
My code is the following:
loadMap() {
console.log('create');
this.map = GoogleMaps.create('restaurantMap', {
'camera': {
'target': {
"lat": 21.382314,
"lng": -157.933097
},
'zoom': 10
}
});
this.map.one(GoogleMapsEvent.MAP_READY).then(() => {
this.userPostData.northeast = this.map.getVisibleRegion().northeast;
this.userPostData.southwest = this.map.getVisibleRegion().southwest;
this.map.on(GoogleMapsEvent.MAP_DRAG_END).subscribe(
() => {
this.userPostData.northeast = this.map.getVisibleRegion().northeast;
this.userPostData.southwest = this.map.getVisibleRegion().southwest;
this.map.clear();
this.addCluster(this.dummyData2());
}
);
this.geoLocation.getCurrentPosition().then((resp) => {
this.lat = resp.coords.latitude;
this.lng = resp.coords.longitude;
let position: CameraPosition<ILatLng> = {
target: {
lat: this.lat,
lng: this.lng
},
zoom: 18
};
this.map.moveCamera(position);
this.addCluster(this.dummyData());
}).catch((error) => {
this.helper.presentToast('Please turn on you gps!');
});
});
}
addCluster(data) {
this.map.addMarkerCluster({
markers: data,
icons: [
{
min: 3,
max: 10,
url: "./assets/img/marker/m1.png",
label: {
color: "white"
}
},
{
min: 11,
max: 30,
url: "./assets/img/marker/m2.png",
label: {
color: "white"
}
},
{
min: 31,
url: "./assets/img/marker/m3.png",
label: {
color: "white"
}
}
]
}).then((markerCluster: MarkerCluster) => {
markerCluster.on(GoogleMapsEvent.MARKER_CLICK).subscribe((params) => {
let marker: Marker = params[1];
let htmlInfoWindow = new HtmlInfoWindow();
let frame: HTMLElement = document.createElement('div');
frame.innerHTML = [
'<h2>'+ marker.get("name") +'</h2>',
'<button>Open/button>'
].join("");
frame.getElementsByTagName("button")[0].addEventListener("click", () => {
console.log('Click');
});
htmlInfoWindow.setContent(frame, {
width: "230px",
height: "150px",
});
htmlInfoWindow.open(marker);
});
});
}
dummyData() {
return [
{
"position": {
"lat": 46.0738144,
"lng": 18.210416
},
"name": "Place 1",
"rating": "4",
"restaurantId": "2"
},
{
"position": {
"lat": 46.0733244,
"lng": 18.210716
},
"name": "Place 2",
"rating": "3",
"restaurantId": "3"
}
];
}
The following part of the code is the one that is not running:
frame.getElementsByTagName("button")[0].addEventListener("click", () => {
console.log('Click');
});
Any suggestions are welcome and appreciated.
Thanks
Trix