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

**URL:** <https://forum.ionicframework.com/t/solved-referenceerror-google-is-not-defined-ionic-v3-9-2-angular-v5-2-11/136839>\
**Category:** ionic-v3\
**Created:** [July 31, 2018, 9:15am UTC](https://forum.ionicframework.com/t/solved-referenceerror-google-is-not-defined-ionic-v3-9-2-angular-v5-2-11/136839 "2018-07-31T09:15:06Z")\
**Posts on this page:** 10\
**Page:** 1

<div class="post-metadata">

**Author:** ![qaudaffyazmi](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/qaudaffyazmi/32/120733_2.png) [@qaudaffyazmi](https://forum.ionicframework.com/u/qaudaffyazmi)\
**Post date:** [July 31, 2018, 9:15am UTC](https://forum.ionicframework.com/t/solved-referenceerror-google-is-not-defined-ionic-v3-9-2-angular-v5-2-11/136839/1 "2018-07-31T09:15:06Z")

</div>

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

```auto
  <!-- 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

```auto
declare var google: any;
declare var google;
declare var google: google;

```

**The .ts file**

```auto
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**

```auto
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**

```auto
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  
🙏

---

<div class="post-metadata">

**Author:** ![bengtler](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/bengtler/32/98565_2.png) [@bengtler](https://forum.ionicframework.com/u/bengtler)\
**Post date:** [July 31, 2018, 9:37am UTC](https://forum.ionicframework.com/t/solved-referenceerror-google-is-not-defined-ionic-v3-9-2-angular-v5-2-11/136839/2 "2018-07-31T09:37:35Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![qaudaffyazmi](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/qaudaffyazmi/32/120733_2.png) [@qaudaffyazmi](https://forum.ionicframework.com/u/qaudaffyazmi)\
**Post date:** [July 31, 2018, 10:01am UTC](https://forum.ionicframework.com/t/solved-referenceerror-google-is-not-defined-ionic-v3-9-2-angular-v5-2-11/136839/3 "2018-07-31T10:01:03Z")

</div>

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

```auto
  <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]

---

<div class="post-metadata">

**Author:** ![whisker-and-paw](https://avatars.discourse-cdn.com/v4/letter/w/7bcc69/32.png) [@whisker-and-paw](https://forum.ionicframework.com/u/whisker-and-paw)\
**Post date:** [January 29, 2019, 5:19am UTC](https://forum.ionicframework.com/t/solved-referenceerror-google-is-not-defined-ionic-v3-9-2-angular-v5-2-11/136839/4 "2019-01-29T05:19:38Z")

</div>

> [@qaudaffyazmi](#):
>
> c

SOLVED! _high five_ thank you

---

<div class="post-metadata">

**Author:** ![AbdelP](https://avatars.discourse-cdn.com/v4/letter/a/ee59a6/32.png) [@AbdelP](https://forum.ionicframework.com/u/AbdelP)\
**Post date:** [September 11, 2019, 6:20pm UTC](https://forum.ionicframework.com/t/solved-referenceerror-google-is-not-defined-ionic-v3-9-2-angular-v5-2-11/136839/5 "2019-09-11T18:20:06Z")

</div>

Didn’t work for me ☹

---

<div class="post-metadata">

**Author:** ![MisterSaputra](https://avatars.discourse-cdn.com/v4/letter/m/a87d85/32.png) [@MisterSaputra](https://forum.ionicframework.com/u/MisterSaputra)\
**Post date:** [September 27, 2019, 4:22am UTC](https://forum.ionicframework.com/t/solved-referenceerror-google-is-not-defined-ionic-v3-9-2-angular-v5-2-11/136839/6 "2019-09-27T04:22:00Z")

</div>

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>`

---

<div class="post-metadata">

**Author:** ![thegiffary](https://avatars.discourse-cdn.com/v4/letter/t/b5e925/32.png) [@thegiffary](https://forum.ionicframework.com/u/thegiffary)\
**Post date:** [November 9, 2019, 3:27pm UTC](https://forum.ionicframework.com/t/solved-referenceerror-google-is-not-defined-ionic-v3-9-2-angular-v5-2-11/136839/7 "2019-11-09T15:27:15Z")

</div>

This solution is works! Thanks!

---

<div class="post-metadata">

**Author:** ![32Michael](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/32michael/32/110302_2.png) [@32Michael](https://forum.ionicframework.com/u/32Michael)\
**Post date:** [November 12, 2019, 3:41pm UTC](https://forum.ionicframework.com/t/solved-referenceerror-google-is-not-defined-ionic-v3-9-2-angular-v5-2-11/136839/8 "2019-11-12T15:41:53Z")

</div>

This was the solution for me.

---

<div class="post-metadata">

**Author:** ![TobiasFP](https://avatars.discourse-cdn.com/v4/letter/t/35a633/32.png) [@TobiasFP](https://forum.ionicframework.com/u/TobiasFP)\
**Post date:** [February 6, 2020, 10:18pm UTC](https://forum.ionicframework.com/t/solved-referenceerror-google-is-not-defined-ionic-v3-9-2-angular-v5-2-11/136839/9 "2020-02-06T22:18:11Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![mhartington](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/mhartington/32/137757_2.png) [@mhartington](https://forum.ionicframework.com/u/mhartington)\
**Post date:** [July 19, 2021, 9:01pm UTC](https://forum.ionicframework.com/t/solved-referenceerror-google-is-not-defined-ionic-v3-9-2-angular-v5-2-11/136839/10 "2021-07-19T21:01:45Z")

</div>

Closed on July 19, 2021, 9:01pm UTC