I am using this plugin for google maps, and I am getting a white screen instead.
https://github.com/ionic-team/ionic-native-google-maps.
Is it a compatability issue? Any recommendation for another plugin that works with Ionic 4 and cordova?
Thanks
No, there’s no compatibility issue that I am aware of.
But it’s hard to know what the issue is without some sort of example.
Can you provide a demo ?
I copy pasted exactly the same code as provided in the link above, and followed every step
The screen is blank and there is are no errors thrown.
I am not sure whats going on here
Can you provide minimal repo to reproduce.
Sure.
Firstly in created a button that one you click, it open a model called location. once that page opens it is supposed to load the map.
in the locationpage.ts
import {
GoogleMaps,
GoogleMap,
GoogleMapsEvent,
Environment,
GoogleMapOptions
} from '@ionic-native/google-maps/ngx';
export class LocationPage implements OnInit {
map: GoogleMap;
constructor(private platform:Platform) {
}
ionViewDidLoad() {
this.platform.ready().then(() =>{
this.loadMap();
})
}
ngOnInit() {
}
loadMap() {
// This code is necessary for browser
Environment.setEnv({
'API_KEY_FOR_BROWSER_RELEASE': myAPIAndroid HERE'',
'API_KEY_FOR_BROWSER_DEBUG': myAndroidApiHere''
});
this.map = GoogleMaps.create('map_canvas');
}
}
In the location.html
<ion-content padding>
<div id="map_canvas">
</div>
</ion-content>
In the location.css
#map_canvas {
height: 90%;
}
then in my config.xml i added my android api
<preference name="GOOGLE_MAPS_ANDROID_API_KEY" value="Api" />
Here is demo : https://github.com/mapsplugin/ionic-googlemaps-quickdemo-v4
Clone it and see
1 Like
Thank you.
Im getting this error, even though I added my API
util.js:230 Google Maps JavaScript API warning: NoApiKeys https://developers.google.com/maps/documentation/javascript/error-messages#no-api-keys
Is there any thing I need to change in my API key? I have the android one restricted.
By the way it is kind of displaying in the we, but not on my phone.
You will have to provide google map api key as you can see in logs
I followed it, It is still appearing grey on my android. It is working perfectly fine when i run ionic cordova run browser.
But on my phone, it is showing a transparent grey screen.
For the API keys of browser, you need to put your keys here.
// This code is necessary for browser
Environment.setEnv({
'API_KEY_FOR_BROWSER_RELEASE': myAPIAndroid HERE'',
'API_KEY_FOR_BROWSER_DEBUG': myAndroidApiHere''
});
For Android / iOS platform keys, you need to put your keys into config.xml
<widget ...>
<preference name="GOOGLE_MAPS_ANDROID_API_KEY" value="(api key)" />
<preference name="GOOGLE_MAPS_IOS_API_KEY" value="(api key)" />
</widget>
1 Like
Thank you for your quick responce. Where do you add this code?
// This code is necessary for browser
Environment.setEnv({
'API_KEY_FOR_BROWSER_RELEASE': myAPIAndroid HERE'',
'API_KEY_FOR_BROWSER_DEBUG': myAndroidApiHere''
});
For the browser it is working fine, I am using a seperate API that is ristricted to https, and im adding this in the index.html
<script src="https://maps.googleapis.com/maps/api/js?key=MY HTTPS API"></script>
But for the browser i am adding my ANDROID API in the config.xml as following
<plugin name="cordova-plugin-whitelist" spec="1.3.3" />
<plugin name="cordova-plugin-ionic-keyboard" spec="^2.0.5" />
<preference name="GOOGLE_MAPS_ANDROID_API_KEY" value="MY ANDROID API" />
First, I don’t recommend you include your API key in index.html.
Because this plugin works with Google Maps SDK for Android/iOS which do not use Google Maps JavaScript v3 API.
If you include your API key in the index.html, you might be charged even on Android/iOS platforms.
Second, please enable Google Maps SDK for Android and Google Maps SDK for iOS BEFORE new API keys generate.
Then generate new API keys.
After that, you put them in to config.xml file, then
$> ionic cordova run android
This plugin does not support ionic serve command.
1 Like
And, please check the slides BEFORE using this plugin
One thing I would like to add though is that when i click on the button to open a new model with the map, the page is just transparent grey, i can see the page below it. So I am thinking its something to do with the ion-content? because in my html im putting the map inside an ion-content
What is open a new model? Do you mean modal dialog?
so in my home page, i have a button, i click it and call this method.
// open Location Page
async openLocationPage(i, item) {
const modal = await this.modalController.create({
component: LocationPage,
cssClass: 'modalCss',
componentProps:{
name: this.name
}
});
return await modal.present();
}
it opens the location page.
and in my location page I have the following, “its your work actually, i just copied it”.
So Im expecting the map to load once the location page opens up, but whats happening instead is that once the location page is opened its just transparent, and i can see the home page underneath it.
constructor(
public loadingCtrl: LoadingController,
public toastCtrl: ToastController,
private platform: Platform) { }
async ngOnInit() {
// Since ngOnInit() is executed before `deviceready` event,
// you have to wait the event.
await this.platform.ready();
await this.loadMap();
}
loadMap() {
this.map = GoogleMaps.create('map_canvas', {
camera: {
target: {
lat: 43.0741704,
lng: -89.3809802
},
zoom: 18,
tilt: 30
}
});
}
async onButtonClick() {
this.map.clear();
this.loading = await this.loadingCtrl.create({
message: 'Please wait...'
});
await this.loading.present();
// Get the location of you
this.map.getMyLocation().then((location: MyLocation) => {
this.loading.dismiss();
console.log(JSON.stringify(location, null ,2));
// Move the map camera to the location with animation
this.map.animateCamera({
target: location.latLng,
zoom: 17,
tilt: 30
});
// add a marker
let marker: Marker = this.map.addMarkerSync({
title: '@ionic-native/google-maps plugin!',
snippet: 'This plugin is awesome!',
position: location.latLng,
animation: GoogleMapsAnimation.BOUNCE
});
// show the infoWindow
marker.showInfoWindow();
// If clicked it, display the alert
marker.on(GoogleMapsEvent.MARKER_CLICK).subscribe(() => {
this.showToast('clicked!');
});
})
.catch(err => {
this.loading.dismiss();
this.showToast(err.error_message);
});
}
async showToast(message: string) {
let toast = await this.toastCtrl.create({
message: message,
duration: 2000,
position: 'middle'
});
toast.present();
}
I don’t recommend you use this plugin in a modal dialog for beginner of this plugin.
This plugin puts a map view UNDER <html> tag. It means outside of HTML, because the GoogleMap is NOT an HTML element.
Please read and understand how plugin works, and why the page becomes be transparent.
1 Like
Ahhhh i understand now the problem. Hmm but that makes it tricky now, since the goal is to open up the map with a particular location once the user clicks the button. Any suggestion on how can I do this instead?
My recommendation is to open a new page instead of dialog.
3 Likes