GoogleMaps doesn't load properly

[ReyPorto]

Hi,

I’m working on an application where I need to use the services of Google Maps, I read the documentation of Ionic Native. But when run the application on the device, the map doesn’t load correctly:

Plugin:

“@ionic-native/geolocation”: “^3.7.0”,
“@ionic-native/google-maps”: “^3.7.0”,

Ionic Info

Your system information:

Cordova CLI: 7.0.0
Ionic Framework Version: 3.1.1
Ionic CLI Version: 2.2.3
Ionic App Lib Version: 2.2.1
Ionic App Scripts Version: 1.3.7
ios-deploy version: Not installed
ios-sim version: Not installed
OS: Linux 4.4
Node Version: v4.2.6
Xcode version: Not installed

HTML

<ion-content scroll="false">
  <div id="map"></div>
</ion-content>

CSS:

ion-app._gmaps_cdv_ .nav-decor {
  background-color: transparent !important;
}

page-google-map {
    #map {
        height: 100%;
    }
}

Page:

import { Component } from '@angular/core';
import { IonicPage, NavController } from 'ionic-angular';
import { GoogleMaps, GoogleMap, GoogleMapsEvent, LatLng, CameraPosition, MarkerOptions } from '@ionic-native/google-maps';
import { Geolocation, Geoposition } from '@ionic-native/geolocation';

@IonicPage()
@Component({
  selector: 'page-google-map',
  templateUrl: 'google-map.html',
})
export class GoogleMapPage {

  constructor(
    public navCtrl: NavController, 
    private googleMaps: GoogleMaps,
    private geolocation: Geolocation
  ) {
  }

  ngAfterViewInit() {
    this.geolocation.getCurrentPosition().then((res) => {
      this.loadMap(res);
    })
    .catch((error) =>{
      console.log(error);
    });
  }

  loadMap(postion: Geoposition) {
    let latitude = postion.coords.latitude;
    let longitud = postion.coords.longitude;
    let element: HTMLElement = document.getElementById('map');
    let map: GoogleMap = this.googleMaps.create(element);
    let myPosition: LatLng = new LatLng(latitude,longitud);

    let position: CameraPosition = {
      target: myPosition,
      zoom: 15,
      tilt: 30
    };

    map.one(GoogleMapsEvent.MAP_READY).then(()=>{
      console.log('Map is ready!');
      map.moveCamera(position);
      let markerOptions: MarkerOptions = {
        position: myPosition,
        title: 'Tu ubicación...'
      };
      map.addMarker(markerOptions);
    });
  }
}

app.module.ts:

providers: [
    Geolocation,
    GoogleMaps

Regards

[Sujan12]

Please edit your post and use the </> button above the post input field to format your code or error message or wrap it in ``` (“code fences”) manually. This will make sure your text is readable and if it recognizes the programming language it also automatically adds code syntax highlighting. Thanks.

Did you remote debug the problem on the device already? Follow these instructions here to debug the problem in Chrome dev tools: https://ionic.zone/debug/remote-debug-your-app#android Look at the console and network tabs for errors.

[MarcusIII]

@ReyPorto did you create an API Key and use it ?
if not create one

[ReyPorto]

Hi @MarcusIII ,

I have created the api key. At the time of installation I did the following:

$ ionic plugin add cordova-plugin-googlemaps --variable API_KEY_FOR_ANDROID="MY_API_KEY"

This is my package.json

"cordova": {
        "plugins": {
            "cordova-plugin-console": {},
            "cordova-plugin-device": {},
            "cordova-plugin-splashscreen": {},
            "cordova-plugin-statusbar": {},
            "cordova-plugin-whitelist": {},
            "ionic-plugin-keyboard": {},
            "cordova-sqlite-storage": {},
            "cordova.plugins.diagnostic": {},
            "cordova-plugin-googleplus": {
                "REVERSED_CLIENT_ID": "MY_REVERSED_CLIENT_ID"
            },
            "cordova-plugin-sim": {},
            "cordova-plugin-geolocation": {},
            "cordova-plugin-googlemaps": {
                "API_KEY_FOR_ANDROID": "MY_API_KEY"
            }
        },
        "platforms": [
            "android"
        ]
    }

[ReyPorto]

Hi @Sujan12,

I edited my post, thank u!

Regard to debug, I can’t detect any errors:

Regards

[MarcusIII]

@ReyPorto try calling your loadMap inside

ionViewDidEnter()

 ionViewDidEnter() {
    this.geolocation.getCurrentPosition().then((res) => {
      this.loadMap(res);
    })
    .catch((error) =>{
      console.log(error);
    });
  }

[ReyPorto]

@MarcusIII,

The same error occurs

Regards

[MarcusIII]

@ReyPorto
try this
map.refreshLayout();
inside your MAP_READY event

[ReyPorto]

@MarcusIII

map.one(GoogleMapsEvent.MAP_READY).then(()=>{
      console.log('Map is ready!');
      map.moveCamera(position);
      let markerOptions: MarkerOptions = {
        position: myPosition,
        title: 'Tu ubicación...'
      };
      map.addMarker(markerOptions);
      map.refreshLayout();
    });

The same error occurs. I don’t understand what’s happening.

[ReyPorto]

I’ve solved the problem, enabled the Google Map Android API in Google developer console

[lyczos]

I have same problem but i have enabled API… still doesn’t work.
No errors, only warning in console:

Native: tried accessing the GoogleMaps plugin but Cordova is not available. Make sure to include cordova.js or run in a device/simulator