Google Map not showing with Ionic 2 native google-maps plugin

Ionic Native
1

https://github.com/mapsplugin/cordova-plugin-googlemaps

following all the instructions still map no loaded got blank map.

checked it for solution here.

applied all the solutions still not working.

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

2

Try to regenerate API keys, and reinstall the plugin.

3

Hello, @Heenavora

Step 1:- include <script src="http://maps.google.com/maps/api/js?key=API_KEY"></script>
in your src/index.html file (above the cordova.js file):
(API_KEY you get from https://console.developers.google.com/apis/credentials?)

Write below code in your HomePage.html file:-
<ion-content><div #map id="map"></div> </ion-content>

Write below code in your HomePage.component.ts file:-

import { Component, ViewChild, ElementRef } from '@angular/core';
import { NavController } from 'ionic-angular';
 
declare var google;
 
@Component({
  selector: 'home-page',
  templateUrl: 'home.html'
})
export class HomePage {
 
  @ViewChild('map') mapElement: ElementRef;
  map: any;
 
  constructor(public navCtrl: NavController) {
 
  }
 
  ionViewDidLoad(){
    this.loadMap();
  }
 
  loadMap(){
 
    let latLng = new google.maps.LatLng(19.0760, 72.8777);
 
    let mapOptions = {
      center: latLng,
      zoom: 15,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    }
 
    this.map = new google.maps.Map(this.mapElement.nativeElement, mapOptions);
 
  }
}

Write below code in your HomePage.scss file:-

.ios, .md {
 
    home-page {
 
      .scroll {
        height: 100%
      }
 
      #map {
        width: 100%;
        height: 100%;
      }
 
    }
 
}

This works 100% fine

becuase i took this reference from joshmorouny

Thank you joshmorouny

4

That’s not native Google Maps.