[SOLVED] ReferenceError: google is not defined - ionic v3.9.2, angular v5.2.11

Ionic Framework ionic-v3
1

Hello guys, i know this error is pretty common but i still have no idea which part did i do wrong.

i already did

load googlemaps js script in index.html

  <!-- GOOGLE MAPS -->
  <script src="http://maps.google.com/maps/api/js?key=<MY API KEY HERE>"></script>
  <!-- cordova.js required for cordova apps (remove if not needed) -->
  <script src="cordova.js"></script>

then

npm install @types/google-maps --save-dev

and

import { google } from 'google-maps';

and try declare all 3 before the component

declare var google: any;
declare var google;
declare var google: google;

The .ts file

import { Geolocation } from '@ionic-native/geolocation';
import { google } from 'google-maps';

declare var google: any;

@IonicPage()
@Component({
  selector: 'page-add-record',
  templateUrl: 'add-record.html',
})

export class AddRecordPage {
constructor(public navCtrl: NavController, public navParams: NavParams, public authService: AuthServiceProvider, public alertCtrl: AlertController, public actionSheetCtrl: ActionSheetController, private camera: Camera, public platform: Platform, private geolocation: Geolocation) {
    platform.ready().then(() => {
      this.loadMap();
    });
  }

  loadMap(){
    let latLng = new google.maps.LatLng(-34.9290, 138.6010);
    let mapOptions = {
      center: latLng,
      zoom: 15,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    }
    this.map = new google.maps.Map(this.mapElement.nativeElement, mapOptions) 
  }
}

The Error

ERROR ReferenceError: google is not defined
    at AddRecordPage.webpackJsonp.162.AddRecordPage.loadMap (add-record.ts:55)
    at AddRecordPage.webpackJsonp.162.AddRecordPage.ionViewDidLoad (add-record.ts:37)
    at ViewController._lifecycle (view-controller.js:486)
    at ViewController._didLoad (view-controller.js:369)
    at NavControllerBase._didLoad (nav-controller-base.js:768)
    at t.invoke (polyfills.js:3)
    at Object.onInvoke (core.js:4760)
    at t.invoke (polyfills.js:3)
    at r.run (polyfills.js:3)
    at NgZone.run (core.js:4577)

My environment

Ionic:

   ionic (Ionic CLI)  : 4.0.1 (C:\Users\Qaudaffy Azmi\AppData\Roaming\npm\node_modules\ionic)
   Ionic Framework    : ionic-angular 3.9.2
   @ionic/app-scripts : 3.1.11

Cordova:

   cordova (Cordova CLI) : 8.0.0
   Cordova Platforms     : none

System:

   Android SDK Tools : 26.1.1
   NodeJS            : v8.11.3 (C:\Laragon\bin\nodejs\node-v8\node.exe)
   npm               : 5.6.0
   OS                : Windows 10

Environment:

   ANDROID_HOME : D:\Android\sdk

really appreciate any help
been stuck for a week
:pray:

2

you added the script tag at the end of your app?

i think maps is not loaded when you access it.

Check if google maps is loaded at all --> open JS Console and check if there is a google key on your window object, after the page is fully loaded.

If so i think it is a timing issue.

I often use “ScriptLoaderComponents/Directives” to do those stuff.

Like --> GoogleMapsLoader, checks if google and google.maps is already on the window object, if not --> add the async scripttag with your api key.
Add a google maps callback which triggers an event or somethingelse so you get notified, if google is or is already is initialised.

No hacky index.html manipulating.

3

solved!

your hint to check if map loaded helps me!

what i did is change this

<script src="http://maps.google.com/maps/api/js?key=API_KEY"></script>

to this

  <script async defer
  src="https://maps.googleapis.com/maps/api/js?key=API_KEY&callback=initMap">
  </script>

and call it before </body> instead of inside<header></header> in index.html

tq very much [@bengtler]

4

SOLVED! high five thank you

5

Didn’t work for me :frowning:

6

The important part is change HTTP to HTTPS.
it worked for me, thanks!

<script src="https://maps.googleapis.com/maps/api/js?key=API_KEY&callback=initMap"></script>

7

This solution is works! Thanks!

8

This was the solution for me.

9

This was the solution for me as well, added it right before and right after