I am trying to embed a google map on my Ionic 2 app, but the map is not showing.
I took the code from https://ionicframework.com/docs/native/google-maps/
Here is my code :
home.html
<ion-content>
<div id="map_canvas" class="map"></div>
<button ion-button (click)="loadMap()"></button>
</ion-content>
home.ts
import {
GoogleMaps,
GoogleMap,
GoogleMapsEvent,
GoogleMapOptions,
CameraPosition,
MarkerOptions,
Marker
} from '@ionic-native/google-maps';
@Component({
selector: 'page-home',
templateUrl: 'home.html'
})
export class HomePage {
map: GoogleMap;
constructor(public navCtrl: NavController,
public appService: AppService,
public apiService: ApiService,
public util: Util,
private geolocation: Geolocation,
private googleMaps: GoogleMaps
) {
}
loadMap() {
let mapOptions: GoogleMapOptions = {
camera: {
target: {
lat: 43.0741904,
lng: -89.3809802
},
zoom: 18,
tilt: 30
}
};
this.map = this.googleMaps.create('map_canvas', mapOptions);
// Wait the MAP_READY before using any methods.
this.map.one(GoogleMapsEvent.MAP_READY)
.then(() => {
console.log('Map is ready!');
// Now you can use all methods safely.
this.map.addMarker({
title: 'Ionic',
icon: 'blue',
animation: 'DROP',
position: {
lat: 43.0741904,
lng: -89.3809802
}
})
.then(marker => {
marker.on(GoogleMapsEvent.MARKER_CLICK)
.subscribe(() => {
alert('clicked');
});
});
});
}
As mentioned I installed the plugin with these 2 commands :
ionic plugin add cordova-plugin-googlemaps
npm install --save @ionic-native/google-maps
Of course I specified my Android and iOS API keys.
From the package.json, @ionic-native/google-maps version 4.3.3 and the cordova-plugin-googlemaps version is 2.1.1
When my page loads, I have my div which is blank. When I trigger the little button to load the map, I have a console log saying "Map is ready", no error, and my requests are present on the API console
There is not the shape of the map, there is no Google logo, there is just a blank screen, nothing loads.
Thank in advance for any help !
