Ionic4 NullInjectorError: No provider for GoogleMap!

[monurakkaya]

I'm submitting a ... (check one with "x")

• [ ] question
• [ x] any problem or bug report
• [ ] feature request

If you choose 'problem or bug report', please select OS: (check one with "x")

• [ ] Android
• [ ] iOS
• [x ] Browser

cordova information: (run $> cordova plugin list)

cordova-plugin-device 2.0.2 "Device"
cordova-plugin-googlemaps 2.4.6 "cordova-plugin-googlemaps"
cordova-plugin-ionic-keyboard 2.1.3 "cordova-plugin-ionic-keyboard"
cordova-plugin-ionic-webview 2.2.0 "cordova-plugin-ionic-webview"
cordova-plugin-splashscreen 5.0.2 "Splashscreen"
cordova-plugin-statusbar 2.4.2 "StatusBar"
cordova-plugin-whitelist 1.3.3 "Whitelist"
cordova-sqlite-storage 2.4.0 "Cordova sqlite storage plugin"

If you use @ionic-native/google-maps, please tell the package.json (only @ionic-native/core and @ionic-native/google-maps are fine mostly)

 "@ionic-native/core": "^5.0.0-beta.21",
 "@ionic-native/google-maps": "^5.0.0-beta.25",

Related code, data or error log (please format your code or data):

Uncaught (in promise): Error: StaticInjectorError(AppModule)[HotelRoomPage -> GoogleMap]: 
StaticInjectorError(Platform: core)[HotelRoomPage -> GoogleMap]: 
NullInjectorError: No provider for GoogleMap!
Error: StaticInjectorError(AppModule)[HotelRoomPage -> GoogleMap]: 
StaticInjectorError(Platform: core)[HotelRoomPage -> GoogleMap]: 
NullInjectorError: No provider for GoogleMap!

i dont know what should i do

hotel-room-page.ts:

import { Component, OnInit } from '@angular/core';
import {ActivatedRoute} from "@angular/router";
import {Socket} from "ngx-socket-io";
import {HotelService} from "../../../services/hotel.service";
import {AppService} from "../../../services/app.service";
import {Hotel} from "../../../models/hotel/hotel.model";
import {Option} from "../../../models/hotel/option.model";
import {
  GoogleMaps,
  GoogleMap, GoogleMapOptions, Environment,
} from '@ionic-native/google-maps/ngx';
import {Platform} from "@ionic/angular";

@Component({
  selector: 'app-hotel-room',
  templateUrl: './hotel-room.page.html',
  styleUrls: ['./hotel-room.page.scss'],
})
export class HotelRoomPage implements OnInit{
  active_tab = 'rooms';
  search = {};
  search_id; hotel_id;
  hotel:Hotel = new Hotel();
  options;
  meta;
  filter = {
    is_pristine: false
  };
  generateArray;
  constructor(
    private platform: Platform, 
    private map: GoogleMap, 
    private route: ActivatedRoute, 
    private socket: Socket, 
    private service: HotelService, 
    private app: AppService) {
    this.search = this.service.getSearchData();
    this.generateArray = this.app.generateArray;
    this.hotel_id = this.route.snapshot.paramMap.get('hotel_id');
    this.service.getHotelDetails(this.hotel_id)
      .subscribe(response =>  {
        this.hotel = response;
        console.log(this.hotel);
      });
  }

  async ngOnInit() {
    await this.platform.ready();
    await this.loadMap();
  }

  loadMap() {
    Environment.setEnv({
      'API_KEY_FOR_BROWSER_RELEASE': '(your api key for `https://`)',
      'API_KEY_FOR_BROWSER_DEBUG': '(your api key for `http://`)'
    });

    let mapOptions: GoogleMapOptions = {
      camera: {
        target: {
          lat: 43.0741904,
          lng: -89.3809802
        },
        zoom: 18,
        tilt: 30
      }
    };
    this.map = GoogleMaps.create('map_canvas', mapOptions);
  }

}

[wf9a5m75]

Try from '@ionic-native/google-maps'

[monurakkaya]

@wf9a5m75 still no luck. same error. should i add GoogleMaps to app.module.ts? i'm using ionic4 and followed presentation in readme

[wf9a5m75]

Please your project files on GitHub. I will check it on Monday in the US

[wf9a5m75]

ping

[monurakkaya]

@wf9a5m75 here it is :

https://github.com/monurakkaya/book

in maps page ( home in the app ) map works good on browser but not android,

room-page (click the button) it doesn't work on both platforms

[wf9a5m75]

Thank you for sharing. Unfortunately I'm terrible busy this and next week. I have no enough time to check your code deeply. Please help as much as possible to save my time.

First, please take a video of your problem, then put it on Youtube or convert to GIF animation then share it on here.

If I notice something, I will comment it.

The second step is that please create a simple project that has only a few pages, and map. You will probably reach what the problem is.

[monurakkaya]

@wf9a5m75 just npm install and ionic cordova run browser would enough to see my problem actually. i've created the map page and made it to root page to show you quickly. Still do you want me to do take a video, gifs etc.. :/ I'm sorry for you. Hope you will be relaxed soon.

[wf9a5m75]

just npm install and ionic cordova run browser would enough to see my problem actually.

Sorry, I even don't have a time for do that.

[monurakkaya]

okay thanks.

On 28 Nov 2018, at 21:18, Masashi Katsumata notifications@github.com wrote:

just npm install and ionic cordova run browser would enough to see my problem actually.

Sorry, I even don't have a time for do that.

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/ionic-team/ionic-native-google-maps/issues/129#issuecomment-442550757, or mute the thread https://github.com/notifications/unsubscribe-auth/AJzH81_ZokmM-wyFM0O1eBWJ-XUHMX9Uks5uztNqgaJpZM4YxZih.

[buzi-p]

Same problem, any issue ?