I'm setting up my Ionic app and I've followed the Google Maps API documentation precisely. However, I have not been able to escape this error I keep getting when I try to run the Maps API:
And then this is my full code from the HomePage. I have made sure to put in a div in the home.html with the id="map_canvas"
as well as set the height to 100% in the scss file for it. From what I've seen, the error seems to not like the Environment part, but I have made sure my API key is correct and I've run the correlating cordova commands to set up the google maps plug in. I just cannot see what could be causing this error.
import {
GoogleMaps,
GoogleMap,
GoogleMapsEvent,
GoogleMapOptions,
Marker,
Environment
} from '@ionic-native/google-maps';
import { Component } from "@angular/core/";
@Component({
selector: 'page-home',
templateUrl: 'home.html'
})
export class HomePage {
map: GoogleMap;
constructor() { }
ionViewDidLoad() {
this.loadMap();
}
loadMap() {
// This code is necessary for browser
Environment.setEnv({
'API_KEY_FOR_BROWSER_RELEASE': 'I_ENTERED_MY_UNRESTRICTED_API_KEY_HERE',
'API_KEY_FOR_BROWSER_DEBUG': ''
});
let mapOptions: GoogleMapOptions = {
camera: {
target: {
lat: 43.0741904,
lng: -89.3809802
},
zoom: 18,
tilt: 30
}
};
this.map = GoogleMaps.create('map_canvas', mapOptions);
let marker: Marker = this.map.addMarkerSync({
title: 'Ionic',
icon: 'blue',
animation: 'DROP',
position: {
lat: 43.0741904,
lng: -89.3809802
}
});
marker.on(GoogleMapsEvent.MARKER_CLICK).subscribe(() => {
alert('clicked');
});
}
}
You need to build it for whatever platform that you want to use (ex. browser, android, ios) using
ionic cordova build browser -l
and then this will create the environment for it and thus it will be running. It does not simply work using ionic serve
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With