Alexandr Belov Alexandr Belov - 3 months ago 31
TypeScript Question

Property 'map' does not exist on type 'MapPage'

I am trying to insert Google Maps into my Ionic 2 application based on the Tabs template.

Everything had been working fine before I tried to initialize in constructor function this.map method.

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
});
}

}


Now console throws an error GET http://localhost:8100/build/js/app.bundle.js

And there's also an error in my Terminal:


Error TS2339: Property 'map' does not exist on type 'MapPage'.


Found lots of similar cases with an issue Error TS2339: Property 'map' does not exist on type 'Observable'.

I've updated my npm - didn't help.
Removing this.map = null method from my code now doesn't make my app working, the same error and ionic serve command doesn't load my app (only its default index.html page)

How do I add that Property 'map' to my 'MapPage' class to solve the issue? What has been done wrong in my code?

Answer

You need to declare the map property before using it:

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 {

  private map: any; // <- declare the variable

  constructor(private navCtrl: NavController) {

    this.map = null; // <- Now the variable exists so you can initialize it

    this.loadMap();

   }

   loadMap() {
      // Instead of using a new variable, use this.map to use the existing map property
      this.map = new google.maps.Map(document.getElementById('map'), {
      center: {lat: -34.397, lng: 150.644},
      scrollwheel: false,
      zoom: 8
    });
   }

}
Comments