ERROR in src/app/tab1/tab1.page.ts(17,8): error TS2339: Property 'map' does not exist on type

Asked

Viewed 45 times

0

I’m creating an Ionic app for a project and need to integrate a map, in addition to the camera and gallery functionality that should save the image and user geolocation.

I’m having a problem running the code. It starts and gives the following console error: ERROR in src/app/tab1/tab1.page.ts(17,8): error TS2339: Property 'map' does not exist on type 'Tab1page'. src/app/tab1/tab1.page.ts(17,18): error TS2304: Cannot find name 'google'.

The crazy thing is that if I change anything in the code and have it compiled by Live Reloading, the code works.

Follow the code of my page and my typescript:

import { Component } from '@angular/core';
import { Geolocation } from '@ionic-native/geolocation';
/**import { Geolocation } from '@ionic-native/geolocation/ngx';*/

@Component({
  selector: 'app-tab1',
  templateUrl: 'tab1.page.html',
  styleUrls: ['tab1.page.scss']
})
export class Tab1Page {

 	constructor() {
 	}

	ionViewDidEnter(){
		//Set latitude and longitude of some place
		this.map = new google.maps.Map(document.getElementById('map'), {
			center: { lat: -34.9011, lng: -56.1645 },
			zoom: 15,
			/** streetViewControl: false, */
		    disableDefaultUI: true,
    		mapTypeControl: false,
    		scaleControl: true,
    		zoomControl: true,
		});
	}

	/**tryGeolocation(){
	  this.clearMarkers();
	  this.geolocation.getCurrentPosition().then((resp) => {
	    let pos = {
	      lat: resp.coords.latitude,
	      lng: resp.coords.longitude
	    };
	    let marker = new google.maps.Marker({
	      position: pos,
	      map: this.map,
	      title: 'I am here!'
	    });
	    this.markers.push(marker);
	    this.map.setCenter(pos);
	  }).catch((error) => {
	    console.log('Error getting location', error);
	  });
	} */
}
<ion-header>
  <ion-toolbar>
    <ion-title>
      SEMEC <img id='logo' src="../assets/img/logo-prefeitura.png">
    </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>
    <div id='map' #map></div>
</ion-content>

  • this is happening because Voce did not import the module that references the class that contains the name google

  • Voce did not declare the map property in its component

No answers

Browser other questions tagged

You are not signed in. Login or sign up in order to post.