Hi everyone,
I’m new to ionic and basically trying to build a simple Google maps (JS) related application. I’ve already successfully run the map, had it loaded and add an extra dropdown list as a custom control to it. However, whenever I try to fire a method from the change event (of the dropdown select), I got the error '[functionName] is not a function. Anyone can please help me to get an insight of this. Thanks a lot.
This is my .ts code
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.loadMap(); //function to load the map
}
addInfoWindow(marker, content) {
let infoWindow = new google.maps.InfoWindow({
content: content
});
google.maps.event.addListener(marker, 'click', () => {
infoWindow.open(this.map, marker);
});
}
//This is the function I want to call from the change event
private 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 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' }] },
{
featureType: 'administrative.locality',
elementType: 'labels.text.fill',
stylers: [{ color: '#d59563' }]
},
{
featureType: 'poi',
elementType: 'labels.text.fill',
stylers: [{ color: '#d59563' }]
},
{
featureType: 'poi.park',
elementType: 'geometry',
stylers: [{ color: '#263c3f' }]
},
{
featureType: 'poi.park',
elementType: 'labels.text.fill',
stylers: [{ color: '#6b9a76' }]
},
{
featureType: 'road',
elementType: 'geometry',
stylers: [{ color: '#38414e' }]
},
{
featureType: 'road',
elementType: 'geometry.stroke',
stylers: [{ color: '#212a37' }]
},
{
featureType: 'road',
elementType: 'labels.text.fill',
stylers: [{ color: '#9ca5b3' }]
},
{
featureType: 'road.highway',
elementType: 'geometry',
stylers: [{ color: '#746855' }]
},
{
featureType: 'road.highway',
elementType: 'geometry.stroke',
stylers: [{ color: '#1f2835' }]
},
{
featureType: 'road.highway',
elementType: 'labels.text.fill',
stylers: [{ color: '#f3d19c' }]
},
{
featureType: 'transit',
elementType: 'geometry',
stylers: [{ color: '#2f3948' }]
},
{
featureType: 'transit.station',
elementType: 'labels.text.fill',
stylers: [{ color: '#d59563' }]
},
{
featureType: 'water',
elementType: 'geometry',
stylers: [{ color: '#17263c' }]
},
{
featureType: 'water',
elementType: 'labels.text.fill',
stylers: [{ color: '#515c6d' }]
},
{
featureType: 'water',
elementType: 'labels.text.stroke',
stylers: [{ color: '#17263c' }]
}
]
}
//initialize the map
this.map = new google.maps.Map(this.mapElement.nativeElement, mapOptions);
//add custom control
var centerControlDiv = document.createElement('div');
// var centerControl = new this.CenterControl (centerControlDiv, this.map);
// Set CSS for the control border.
var controlUI = document.createElement('div');
controlUI.style.backgroundColor = '#fff';
controlUI.style.border = '2px solid #fff';
controlUI.style.borderRadius = '0px';
controlUI.style.boxShadow = '0 2px 6px rgba(0,0,0,.3)';
controlUI.style.cursor = 'pointer';
controlUI.style.marginBottom = '22px';
controlUI.style.textAlign = 'center';
controlUI.style.marginTop = '15px';
// controlUI.title = '';
centerControlDiv.appendChild(controlUI);
// Set CSS for the control interior.
var controlText = document.createElement('div');
controlText.style.color = 'rgb(25,25,25)';
controlText.style.fontFamily = 'Roboto,Arial,sans-serif';
controlText.style.fontSize = '16px';
controlText.style.lineHeight = '38px';
controlText.style.paddingLeft = '5px';
controlText.style.paddingRight = '5px';
if (this.diemGiaoDich != null) {
//This is where I create the html select
var html = ‘Chọn Điểm Giao Dịch’;
// var html = ‘<ion-select (ionChange)="this.openListCuaHangModal(this.value)"Chọn Điểm Giao Dịch>’;
for (let diemGD of this.diemGiaoDich) {
html += '<option value="' + diemGD.ID_khuvuc + '">' + diemGD.KhuVuc + '</option>';
}
controlText.innerHTML = html + '</select>';
}
else
console.log("Khong thay diem GiaoDich");
controlUI.appendChild(controlText);
// Setup the click event listeners for the custom control
controlUI.addEventListener('click', function () {
//map.setCenter(chicago);
});
//centerControlDiv.index = 1;
this.map.controls[google.maps.ControlPosition.TOP_CENTER].push(centerControlDiv);
//set marker for the current location
var justMarker = new google.maps.Marker({
animation: google.maps.Animation.DROP,
position: latLng,
title: "nothing to show"
});
justMarker.setMap(this.map);
let content = "<h4>Vị trí hiện tại!</h4>";
//add infoWindow for marker
this.addInfoWindow(justMarker, content);
//set marker for all of the offices
var officesMarker;
for (let diemGD of this.diemGiaoDich) {
for (let cuahang of diemGD.CuaHang) {
officesMarker = new google.maps.Marker({
icon: 'http://maps.google.com/mapfiles/ms/icons/blue-dot.png',
position: new google.maps.LatLng(cuahang.Lat, cuahang.Lng),
});
officesMarker.setMap(this.map);
//set listerner to on click event to office markers and go to the booking page
officesMarker.addListener('click', function () {
});
}
}
}, (err) => {
console.log(err);
});
}