Error: Uncaught (in promise): Error: No provider for GoogleMaps [closed]

Question

I am using ionic framework but while integrating google maps i am getting this error : Error: Uncaught (in promise): Error: No provider for GoogleMaps!

this is my map class :

     import { Component,ViewChild } from '@angular/core';
      import { NavController,Platform } from 'ionic-angular';
      import { App, MenuController } from 'ionic-angular';
     import {
     GoogleMaps,
    GoogleMap,
    GoogleMapsEvent,   LatLng,
   CameraPosition,
  MarkerOptions,
  Marker
 } from '@ionic-native/google-maps';
 import { HttpModule } from '@angular/http';
 import { NgModule } from '@angular/core';



  @NgModule({
 imports: [
  HttpModule
]})
@Component({
selector: 'page-home',
templateUrl: 'home.html'
})
export class HomePage {

 map: GoogleMap;
 constructor(public platform: Platform,public navCtrl: 
     NavController,app: App, menu: MenuController,private googleMaps: 
       GoogleMaps) {

     menu.enable(true);
        platform.ready().then(() => {
        this.loadMap();
          });

      }

        @ViewChild('map') mapElement;

// Load map only after view is initialized loadMap(){

       let location = new LatLng(-34.9290,138.6010);

    this.map = new GoogleMap('map', {
      'backgroundColor': 'white',
      'controls': {
        'compass': true,
        'myLocationButton': true,
        'indoorPicker': true,
        'zoom': true
      },
      'gestures': {
        'scroll': true,
        'tilt': true,
        'rotate': true,
        'zoom': true
      },
      'camera': {
        'latLng': location,
        'tilt': 30,
        'zoom': 15,
        'bearing': 50
      }
    });

    this.map.on(GoogleMapsEvent.MAP_READY).subscribe(() => {
        console.log('Map is ready!');
    });

}

}

Answer 1

You need to add the provider to the NgModule, i.e module.ts under providers,

providers: [
  GoogleMaps
]