Google Maps plugin

Ionic Native
1

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

<html>
<head>
  <ion-header>
    <ion-navbar>
      <ion-title>map</ion-title>
    </ion-navbar>
  </ion-header>
</head>
<body>
<ion-content padding>
  <div id="map"></div>
</ion-content>
</body>
<script src="https://maps.google.com/maps/api/js?key=MY_API_KEY" async defer></script>
</html>

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;

@IonicPage()
@Component({
  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(() => {
      this.initMap();
    });
    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
    };
    this.map = new google.maps.Map(document.getElementById('map'));
    this.map = new google.maps.Map(this.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;/r.prototype.run@http://localhost:8100/build/polyfills.js:3:10124 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

2

See:

3 
declare var google;

instead of

declare var google: google;
4

This doesn’t solve my problem :frowning:

5

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

6

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

https://docs.google.com/presentation/d/e/2PACX-1vScoho1ensbR4qCI9AIuQN55BZVvK73pAjI7sumDvW3CrxxHnrmpXWUjx2-8CpFibqU1EjLKCRhuthJ/pub?start=false&loop=false&delayms=3000&slide=id.p

8

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

9

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="https://maps.google.com/maps/api/js?key=MY_API_KEY" async defer></script>

10

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

11

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

import {
  GoogleMaps,
  GoogleMap,
  GoogleMapsEvent,
  GoogleMapOptions,
  CameraPosition,
  MarkerOptions,
  Marker,
  Environment
} from '@ionic-native/google-maps';
import { Component } from "@angular/core/";

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

  ionViewDidLoad() {
    this.loadMap();
  }

  loadMap() {

    // This code is necessary for browser
    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);

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

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

12

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

13

Follow the tutorial.
https://docs.google.com/presentation/d/e/2PACX-1vScoho1ensbR4qCI9AIuQN55BZVvK73pAjI7sumDvW3CrxxHnrmpXWUjx2-8CpFibqU1EjLKCRhuthJ/pub?start=false&loop=false&delayms=3000&slide=id.g282d0a7bfd_0_107

14
15

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

<script src="https://maps.google.com/maps/api/js?key=MY_API_KEY" async defer></script>

without replacing MY_API_KEY with an actual key?

16

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: https://www.youtube.com/watch?v=k12AkV_8mnY.
Thank you again

17

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

1 Like