Reputation: 7724
i am trying to get an basic map to be loaded on my templet. I just followed this instruction https://ionicframework.com/docs/native/google-maps/ to get my map works.
But i am getting error like above question.
here is my code
// Load map only after view is initialized
ngAfterViewInit() {
this.loadMap();
}
loadMap() {
// make sure to create following structure in your view.html file
// and add a height (for example 100%) to it, else the map won't be visible
// <ion-content>
// <div #map id="map" style="height:100%;"></div>
// </ion-content>
// create a new map by passing HTMLElement
let element: HTMLElement = document.getElementById('map');
let map: GoogleMap = this.googleMaps.create(element);
// listen to MAP_READY event
// You must wait for this event to fire before adding something to the map or modifying it in anyway
map.one(GoogleMapsEvent.MAP_READY).then(
() => {
console.log('Map is ready!');
// Now you can add elements to the map like the marker
}
);
// create LatLng object
let ionic: LatLng = new LatLng(43.0741904,-89.3809802);
// create CameraPosition
let position: CameraPosition = {
target: ionic,
zoom: 18,
tilt: 30
};
// move the map's camera to position
map.moveCamera(position);
}
}
i am getting blank screen i am not able to print console.log in my app.compontent.ts file
Upvotes: 3
Views: 4038
Reputation: 7724
I changed my app.module.ts file
import {GoogleMaps,GoogleMap} from '@ionic-native/google-maps';
providers: [
StatusBar,
SplashScreen,
GoogleMaps,
GoogleMap
{provide: ErrorHandler, useClass: IonicErrorHandler}
]
To this
import {GoogleMaps} from '@ionic-native/google-maps';
providers: [
StatusBar,
SplashScreen,
GoogleMaps
{provide: ErrorHandler, useClass: IonicErrorHandler}
]
Just removing the googleMap from my provider and imports i got it worked
Upvotes: 20