Google maps not display

Ionic Framework ionic-v3
1

import { Component } from ‘@angular/core’;

import { NavController,Platform } from ‘ionic-angular’;

//import { GoogleMap, GoogleMapsEvent, GoogleMapsLatLng } from ‘ionic-native’;

import {
GoogleMaps,
GoogleMap,
GoogleMapsEvent,
LatLng,
CameraPosition,
MarkerOptions,
Marker
} from ‘@ionic-native/google-maps’;

//declare var google: any;

@Component({
selector: ‘page-page1’,
templateUrl: ‘page1.html’
})
export class Page1 {

//@ViewChild(‘map’) map;

constructor(public navCtrl: NavController, public platform: Platform,private googleMaps: GoogleMaps) {}

// Load map only after view is initialize
ngAfterViewInit() {
//this.loadMap();
//alert(‘ngAfterviewInint’);
}

ionViewDidLoad() {
this.loadMap();
alert(‘ionViewDidLoad’);
}

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
//
// <div #map id=“map” style=“height:100%;”>
//

// create a new map by passing HTMLElement
alert(‘get id 1’);
let element: HTMLElement = document.getElementById(‘map’);

  alert('Create 2');
  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

  alert('map.one map ready 3');
  map.one(GoogleMapsEvent.MAP_READY).then(() => alert('Map is ready!'));

// google.maps.event.trigger(map, ‘resize’);
//alert(‘Resize 3.5’);
//google.maps.event.trigger(HTMLElement,‘resize’);
//google.maps.event.trigger(HTMLElement,‘resize’);

  alert('ref layout 3.5');
  map.refreshLayout();
  

  // create LatLng object
  //let ionic: LatLng = new LatLng(43.0741904,-89.3809802);

  alert('Lat long store 4');
  let ionic: LatLng = new LatLng(22.3038945,70.8021599);

  // create CameraPosition
  alert('Create camera positions 5');
  let position: CameraPosition = {
    target: ionic,
    zoom: 16,
    tilt: 30
  };

  // move the map's camera to position
  alert('Move camera positions 6');
  map.moveCamera(position);

  // create new marker
  alert('Set marker options 6');
  let markerOptions: MarkerOptions = {
    position: ionic,
    title: 'Ionic'
  };

  /*const marker: Marker = map.addMarker(markerOptions)
  .then((marker: Marker) => {
      marker.showInfoWindow();
  }); */


  alert('Marker showinfowindows 7');
  const marker:any = map.addMarker(markerOptions)
  .then((marker: Marker) => {
      marker.showInfoWindow();
  });

  alert('Load Complete 8');
  /*const promise = new Promise((resolve, reject) => {
      reject(new Error("Something awful happened"));
  });

  promise.then((marker: Marker) => {
      marker.showInfoWindow();
  });

  promise.catch((err) => {
      console.log('I get called:', err.message);
  }); */

}

/*initJSMaps(mapEle) {
new google.maps.Map(mapEle, {
center: { lat: 43.071584, lng: -89.380120 },
zoom: 16
});
}

initNativeMaps(mapEle) {
this.map = new GoogleMap(mapEle);
mapEle.classList.add(‘show-map’);

this.googleMaps.isAvailable().then(() => {
  const position = new LatLng(43.074395, -89.381056);
  //let ionic: LatLng = new GoogleMapsLatLng(43.0741904,-89.3809802);

  this.map.setPosition(position);
});

}

ionViewDidLoad() {
let mapEle = this.map.nativeElement;

if (!mapEle) {
  alert('Unable to initialize map, no map element with #map view reference.');
  return;
}

// Disable this switch if you'd like to only use JS maps, as the APIs
// are slightly different between the two. However, this makes it easy
// to use native maps while running in Cordova, and JS maps on the web.
if (this.platform.is('cordova') === true) {
  this.initNativeMaps(mapEle);
} else {
  this.initJSMaps(mapEle);
}

}*/

}

2

Click below link i am getting this output.

SCREENSHOT URL

3

Try removing your ios and/or android key restrictions.

4

Thx it’s Now worked and it’s load successfully