Ionic, Map doesnt Display, Android + IOS

Ionic Native
1

Hi ! I use Ionic 3 version and I try to add a page into my app, to display a map with markers.
I already use for my app a Google Map Id for Autocomplete (Google places…).
I went to Google APIs and I added Map Embed, Javascript etc… to my API Key.
But The page appears with “Google” in the bottom and the display button", but the map is empty.
See attached file…

Install the Cordova and Ionic Native plugins:

ionic cordova plugin add https://github.com/mapsplugin/cordova-plugin-googlemaps#multiple_maps --variable API_KEY_FOR_ANDROID="AIzaSyB6mEnxH4vC+++++++++9wnXXNNmK2co" --variable API_KEY_FOR_IOS="AIzaSyB6mEnxH4v++++++++++++++wnXXNNmK2co"<img src="//cdck-file-uploads-global.s3.dualstack.us-west-2.amazonaws.com/ionicframework/original/3X/1/b/1b339fb09b761e7dc9179bc8e8e6681a3c19bd4d.png" width="290" height="500"> npm install --save @ionic-native/google-maps

Here is what I did with my code.

Home.ts : 


import { NavController } from 'ionic-angular';
import { Component, ViewChild, ElementRef } from '@angular/core';
import { GoogleMaps, CameraPosition, GoogleMapsEvent, GoogleMap, MarkerOptions, Marker } from "@ionic-native/google-maps";

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})

export class HomePage {

  @ViewChild('map') mapElement: ElementRef;
  map: any;
  constructor(public navCtrl: NavController, private googleMaps: GoogleMaps) {

  }
  ngAfterViewInit() {
 this.loadMap();
}

loadMap() {
 // make sure to create following structure in your view.html file
 // and add a height (for example 100%) to it, else the map won't be visible
 // <ion-content>
 //  <div #map id="map" style="height:100%;"></div>
 // </ion-content>

 // create a new map by passing HTMLElement
 let element: HTMLElement = document.getElementById('map');

 let map: GoogleMap = this.googleMaps.create(element);

 // listen to MAP_READY event
 // You must wait for this event to fire before adding something to the map or modifying it in anyway
 map.one(GoogleMapsEvent.MAP_READY).then(
   () => {
     console.log('Map is ready!');
     // Now you can add elements to the map like the marker
   }
 );

 // create CameraPosition
 let position: CameraPosition = {
   target: {
     lat: 43.0741904,
     lng: -89.3809802
   },
   zoom: 18,
   tilt: 30
 };

 // move the map's camera to position
}


}

_____________________________________________________________


Home.html :
<ion-header>
  <ion-navbar>
    <ion-title>
      Map
    </ion-title>
    <ion-buttons end>
      <button ion-button (click)="addMarker()"><ion-icon name="add"></ion-icon>Add Marker</button>
    </ion-buttons>  
  </ion-navbar>
</ion-header>
 
<ion-content>
<div #map id="map" style="height:100%;"></div> 
</ion-content>

______________________________________________________________

app.module.ts : 

import { BrowserModule } from '@angular/platform-browser';
import { ErrorHandler, NgModule } from '@angular/core';
import { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular';
import { SplashScreen } from '@ionic-native/splash-screen';
import { StatusBar } from '@ionic-native/status-bar';

import { MyApp } from './app.component';
import { HomePage } from '../pages/home/home';
import {GoogleMaps} from '@ionic-native/google-maps';
@NgModule({
  declarations: [
    MyApp,
    HomePage
  ],
  imports: [
    BrowserModule,
    IonicModule.forRoot(MyApp)
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    HomePage
  ],
  providers: [
    StatusBar,GoogleMaps,
    SplashScreen,
    {provide: ErrorHandler, useClass: IonicErrorHandler}
  ]
})
export class AppModule {}

_____________________________________
1 Like
2

For any one else having a crying session over blank maps
On my side this turned out to be an issue with the API keys, search your platform and plugin folders make sure the right api key is set.

You might need to fiddle around with plugin rm and adding it again making sure the SDK is also installed again.

But generally when the map background google logo and or marks show but the overlay doesnt its an api key issue