Trouble with Google map plugins

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.

this is the error im getting on the browser. On my phone its all grey.

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

https://docs.google.com/presentation/d/e/2PACX-1vScoho1ensbR4qCI9AIuQN55BZVvK73pAjI7sumDvW3CrxxHnrmpXWUjx2-8CpFibqU1EjLKCRhuthJ/pub?start=false&loop=false&delayms=3000&slide=id.p

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.

https://docs.google.com/presentation/d/e/2PACX-1vScoho1ensbR4qCI9AIuQN55BZVvK73pAjI7sumDvW3CrxxHnrmpXWUjx2-8CpFibqU1EjLKCRhuthJ/pub?start=false&loop=false&delayms=3000&slide=id.g3e207b82bf_886_16

2 Likes