CODEWITHSUNDEEP
google-mapsionic-frameworkcordova-pluginsionic3
testerino
testerino

Reputation: 2202

Ionic native Google Maps not showing correctly

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:

enter image description here

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 :(

Upvotes: 2

Views: 3076

Answers (2)

wf9a5m75
wf9a5m75

Reputation: 6158

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.

Upvotes: 2

Andrews Duarte
Andrews Duarte

Reputation: 186

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

Upvotes: 0

Related Questions