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

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

checked it for solution here.

applied all the solutions still not working.

Try to regenerate API keys, and reinstall the plugin.

Hello, @Heenavora

Step 1:- include <script src=""></script>
in your src/index.html file (above the cordova.js file):
(API_KEY you get from

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;
  selector: 'home-page',
  templateUrl: 'home.html'
export class HomePage {
  @ViewChild('map') mapElement: ElementRef;
  map: any;
  constructor(public navCtrl: NavController) {
    let latLng = new google.maps.LatLng(19.0760, 72.8777);
    let mapOptions = {
      center: latLng,
      zoom: 15,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    } = 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

That’s not native Google Maps.