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

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>


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


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;

  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(() => {

    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 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 CLI) : 8.0.0
   Cordova Platforms     : none


   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


   ANDROID_HOME : D:\Android\sdk

really appreciate any help
been stuck for a week

1 Like

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.



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

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

tq very much [@bengtler]


SOLVED! high five thank you

Didn’t work for me :frowning:

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>


This solution is works! Thanks!

This was the solution for me.

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