Hello, fellow developers! I am relatively new to Ionic and web programming in general. Currently, I am working on a small app that involves integrating the Google Maps JS API. While I have successfully created and loaded the map, as well as added a custom control (a dropdown select menu) to it, I am facing an issue with executing a specific function named 'openListCuaHangModal' from the onchange event. Every time I try to do so, I encounter the error "this.openListCuaHangModal is not a function". Any help or insights would be greatly appreciated. Thank you in advance.
Below is a snippet of the code from the .ts file:
export class ChonDiemGiaoDichPage {
@ViewChild('map') mapElement: ElementRef;
map: any;
public diemGiaoDich: any;
constructor(public modalCtrl: ModalController, public navCtrl: NavController, public http: Http, public navParams: NavParams, public viewCtrl: ViewController, public geolocation: Geolocation) {
}
ionViewDidLoad() {
this.diemGiaoDich = this.navParams.get('results');
console.log(this.diemGiaoDich);
**//This is where the map is being loaded**
this.loadMap(this.modalCtrl, this.openListCuaHangModal);
}
addInfoWindow(marker, content) {
let infoWindow = new google.maps.InfoWindow({
content: content
});
google.maps.event.addListener(marker, 'click', () => {
infoWindow.open(this.map, marker);
});
}
**//The function I am attempting to call**
openListCuaHangModal(khuvuc) {
let myModal = this.modalCtrl.create(ListCuaHangPage, khuvuc);
myModal.present();
}
loadMap() {
//Use dynamic geolocation
this.geolocation.getCurrentPosition().then((position) => {
let latLng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
//Set options for the map
let mapOptions = {
zoomControl: true,
mapTypeControl: false,
scaleControl: false,
streetViewControl: false,
rotateControl: false,
fullscreenControl: false,
center: latLng,
zoom: 15,
mapTypeId: google.maps.MapTypeId.ROADMAP,
styles: [
{ elementType: 'geometry', stylers: [{ color: '#242f3e' }] },
{ elementType: 'labels.text.stroke', stylers: [{ color: '#242f3e' }] },
{ elementType: 'labels.text.fill', stylers: [{ color: '#746855' }] },
...
]
}
//Initialize the map
this.map = new google.maps.Map(this.mapElement.nativeElement, mapOptions);
//Add custom control
var centerControlDiv = document.createElement('div');
...
</select>';
}
else
console.log("Khong thay diem GiaoDich");
controlUI.appendChild(controlText);
//Setup click event listeners for the custom control
controlUI.addEventListener('click', function () {
//map.setCenter(chicago);
});
this.map.controls[google.maps.ControlPosition.TOP_CENTER].push(centerControlDiv);
//Set marker for the current location
...
}, (err) => {
console.log(err);
});
}
}