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
– ScrapBench
Voce did not declare the map property in its component
– Eduardo Vargas