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

Question

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?

sebaferreras sebaferreras · Accepted Answer · 2016-09-04T09:38:17

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

}

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

1 Answers