Ionic native Google Maps not showing correctly

Question

few weeks ago I had a problem with the Google maps ionic native module, and I made a question (not solved).

Now I'm testing in a blank page and the map is shown, but it looks like:

This is my xml file, where I have the div that will contain the Map.

<ion-header>
  <ion-navbar>
    <ion-title>maptest</ion-title>
  </ion-navbar>
</ion-header>

<ion-content style="background: pink;">
  <div #map id="map" style="height: 80%;"></div>
</ion-content>

And here we have the ts file. Here I create the Map using ViewChild

import { Component, ViewChild, ElementRef } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';

import {
  GoogleMaps,
  GoogleMap,
  CameraPosition,
  LatLng,
  GoogleMapsEvent,
  GoogleMapOptions
 } from '@ionic-native/google-maps';

/**
 * Generated class for the MaptestPage page.
 *
 * See http://ionicframework.com/docs/components/#navigation for more info
 * on Ionic pages and navigation.
 */

@IonicPage()
@Component({
  selector: 'page-maptest',
  templateUrl: 'maptest.html',
})
export class MaptestPage {
  @ViewChild('map') mapElement: ElementRef;
  map: GoogleMap;

  constructor(public navCtrl: NavController, public navParams: NavParams, private _googleMaps: GoogleMaps) {
  }

  ngAfterViewInit() {
    console.log('ngAfterViewInit');
    this.initMap();
  }

  initMap() {    
    let element = this.mapElement.nativeElement;
    this.map = GoogleMaps.create(element, {});//this._googleMaps.create(element);


    // Wait the MAP_READY before using any methods.
    this.map.one(GoogleMapsEvent.MAP_READY).then(() => {
      console.log('Map is ready!');

    }).catch( err =>{
      console.error("Error maperino --> "+err);
    });
  }

  moveCamera(location: LatLng) {
    let options = {
      target: location,
      zoom: 18,
      tilt: 30
    }

    this.map.moveCamera(options);
  }

}

I don't know what I'm doing wrong :(

score 2 · Answer 1 · answered Dec 29 '17 at 05:39

Since you can see the google logo, your code is fine.

The problem is your api key.

You need to try to regenerate the API key, and reinstall it. Make sure you enable the google maps android api v2 and the google maps sdk for ios before generating the api keys.

https://github.com/mapsplugin/cordova-plugin-googlemaps-doc/blob/master/v1.4.0/TroubleShooting/Blank-Map/README.md

Even you tried the steps, and but you still get the gray map, contact to me directly. I will check it.

Andrews Duarte · Answer 2 · 2017-12-19T12:37:27.687

0

Its an answer, because I don't have reputation to add a comment.

Try add the Platform provider and then use platform ready inside the constructor to initialize your map.

contructor(public navCtrl: NavController,
           public navParams: NavParams,
           private _googleMaps: GoogleMaps,
           private _platform: Platform){
 this.platform.ready().then(() => {
   this.initMap();
 });
}

EDIT: It may be zoom too, try zoom out

EDIT2: Take a look at this slide about ionic and google-maps native https://docs.google.com/presentation/d/1zlkmoSY4AzDJc_P4IqWLnzct41IqHyzGkLeyhlAxMDE/edit#slide=id.g292c767148_0_47

edited Dec 19 '17 at 12:37

answered Dec 19 '17 at 12:31

Andrews Duarte

156
1
7

Whit the platform.ready() didn't work. I will check the presentation :/ – testerino Dec 19 '17 at 12:50
They recommend set the root page after the platform.ready too – Andrews Duarte Dec 19 '17 at 12:52
Try take off the background-color: pink – Andrews Duarte Dec 19 '17 at 13:34
And try to add the GoogleMapOptions, maybe this is buging – Andrews Duarte Dec 19 '17 at 13:38
I removed the bgcolor and used GoogleMaps.create with GoogleMapOptions and does the same :( – testerino Dec 19 '17 at 13:42
This is working for me: https://pastebin.com/RQpM5daj, if this does not work for you, check your API Keys, maybe they are not working. – Andrews Duarte Dec 19 '17 at 16:41
I will check tomorrow if there's some trouble with API keys – testerino Dec 19 '17 at 17:27

Ionic native Google Maps not showing correctly

2 Answers2