I'm currently facing a challenge with integrating Google Maps into my Ionic 2 application that is based on the Tabs template.
Everything was functioning properly until I attempted to initialize the this.map method within the constructor function.
import {Component} from '@angular/core';
import {Geolocation} from 'ionic-native';
import {NavController} from 'ionic-angular';
@Component({
templateUrl: 'build/pages/map/map.html'
})
export class MapPage {
constructor(private navCtrl: NavController) {
this.map = null;
this.loadMap();
}
loadMap() {
var map = new google.maps.Map(document.getElementById('map'), {
center: {lat: -34.397, lng: 150.644},
scrollwheel: false,
zoom: 8
});
}
}
Currently, the console is throwing an error GET http://localhost:8100/build/js/app.bundle.js
Additionally, there's an error showing up in my Terminal:
Error TS2339: Property 'map' does not exist on type 'MapPage'.
I have come across several similar cases where the issue is Error TS2339: Property 'map' does not exist on type 'Observable'.
I have tried updating npm but it did not resolve the problem. Even removing this.map = null from my code does not fix the app, as I still encounter the same error and the 'ionic serve' command only loads the default index.html page.
How can I add the Property 'map' to my 'MapPage' class in order to address this dilemma? What am I missing in my code?