Google Maps plugin

Hi to all. I’m trying to implement google maps in my app but I stumbled in error: google is not defined.
I have looked everywhere but nothing.
My code is:
This is my html file, it is named: map.html

<ion-content padding>
  <div id="map"></div>
<script src="" async defer></script>

And this is my ts file, its name is: map.ts

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams, Platform } from 'ionic-angular';
import { google } from 'google-maps';

declare var google: google;

  selector: 'page-map',
  templateUrl: 'map.html',
export class MapPage {

  map: any;
  constructor(public navCtrl: NavController, public navParams: NavParams, public platform: Platform) {

  ionViewDidLoad() {

    this.platform.ready().then(() => {
    console.log('ionViewDidLoad MapPage');
  initMap() {
    let latLng = new google.maps.LatLng(-34.9290, 138.6010);
    let mapOptions = {
      center: latLng,
      zoom: 15,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    }; = new google.maps.Map(document.getElementById('map')); = new google.maps.Map(, mapOptions)


The error instead is:

ERROR Error: "Uncaught (in promise): ReferenceError: google is not defined [115]/MapPage.prototype.initMap@http://localhost:8100/build/main.js:35:13 [115]/MapPage.prototype.ionViewDidLoad/&lt;@http://localhost:8100/build/main.js:30:13 F&lt;/l&lt;/t.prototype.invoke@http://localhost:8100/build/polyfills.js:3:14974 onInvoke@http://localhost:8100/build/vendor.js:5134:24 F&lt;/l&lt;/t.prototype.invoke@http://localhost:8100/build/polyfills.js:3:14901 F&lt;/c&lt;/ f/&lt;@http://localhost:8100/build/polyfills.js:3:20240 F&lt;/l&lt;/t.prototype.invokeTask@http://localhost:8100/build/polyfills.js:3:15649 onInvokeTask@http://localhost:8100/build/vendor.js:5125:24 F&lt;/l&lt;/t.prototype.invokeTask@http://localhost:8100/build/polyfills.js:3:15562 F&lt;/c&lt;/r.prototype.runTask@http://localhost:8100/build/polyfills.js:3:10815 o@http://localhost:8100/build/polyfills.js:3:7887 F&lt;/h&lt;/e.invokeTask@http://localhost:8100/build/polyfills.js:3:16823 p@http://localhost:8100/build/polyfills.js:2:27646 v@http://localhost:8100/build/polyfills.js:2:27893 " chttp://localhost:8100/build/polyfills.js:3:19752fhttp://localhost:8100/build/polyfills.js:3:20273invokeTaskhttp://localhost:8100/build/polyfills.js:3:15649onInvokeTaskhttp://localhost:8100/build/vendor.js:5125:24invokeTaskhttp://localhost:8100/build/polyfills.js:3:15562runTaskhttp://localhost:8100/build/polyfills.js:3:10815ohttp://localhost:8100/build/polyfills.js:3:7887invokeTaskhttp://localhost:8100/build/polyfills.js:3:16823phttp://localhost:8100/build/polyfills.js:2:27646vhttp://localhost:8100/build/polyfills.js:2:27893

How I can solve the problem? Thanks to all


declare var google;

instead of

declare var google: google;

This doesn’t solve my problem :frowning:

So, you suggest me to use angular google maps instead native plugin?

I believe you don’t use ionic native google maps plugin.
Because you write import { google } from 'google-maps';

If you use @ionic-native/google-maps, this should be

import { GoogleMaps } from '@ionic-native/google-maps'

Nothing, the error is the same. In addition to this, GoogleMaps is never used

I said you don’t use ionic-native/google-maps plugin. That’s why I recommend you use @ionic-native/google-maps plugin instead of <script src="" async defer></script>

Ok, I understand what do you mean. Can you show me a snippet of code please. Thanks a lot

I’ve also tried to use this snipped of code (taken by official doc), but the error is the same:

import {
} from '@ionic-native/google-maps';
import { Component } from "@angular/core/";

  selector: 'page-home',
  templateUrl: 'home.html'
export class HomePage {
  map: GoogleMap;
  constructor() { }

  ionViewDidLoad() {

  loadMap() {

    // This code is necessary for browser
      '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
    }; = GoogleMaps.create('map_canvas', mapOptions);

    let marker: Marker ={
      title: 'Ionic',
      icon: 'blue',
      animation: 'DROP',
      position: {
        lat: 43.0741904,
        lng: -89.3809802
    marker.on(GoogleMapsEvent.MARKER_CLICK).subscribe(() => {

The error of that snippet of code is: ERROR TypeError: “GoogleMaps.getPlugin(…) is null”
But plugin is set up obviously

You don’t install cordova-plugin-googlemaps or/and you forgot platform.ready()

Follow the tutorial.

Just to be clear, you’re actually using an API key, correct? not just copy pasting

<script src="" async defer></script>

without replacing MY_API_KEY with an actual key?

thank you all for the answers. I resolved pasting the API string into src/index.html in ionic. Probably my previous solution wasn’t wrong but maps didn’t load. Now it works fine. I saw this YT video:
Thank you again

You do know that you’re not using the Native plugin for Google maps but the web version?

1 Like