Google Maps plugin

AxeOwl · October 3, 2018, 9:35pm

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/<@http://localhost:8100/build/main.js:30:13 F</l</t.prototype.invoke@http://localhost:8100/build/polyfills.js:3:14974 onInvoke@http://localhost:8100/build/vendor.js:5134:24 F</l</t.prototype.invoke@http://localhost:8100/build/polyfills.js:3:14901 F</c</r.prototype.run@http://localhost:8100/build/polyfills.js:3:10124 f/<@http://localhost:8100/build/polyfills.js:3:20240 F</l</t.prototype.invokeTask@http://localhost:8100/build/polyfills.js:3:15649 onInvokeTask@http://localhost:8100/build/vendor.js:5125:24 F</l</t.prototype.invokeTask@http://localhost:8100/build/polyfills.js:3:15562 F</c</r.prototype.runTask@http://localhost:8100/build/polyfills.js:3:10815 o@http://localhost:8100/build/polyfills.js:3:7887 F</h</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

robinyo · October 3, 2018, 11:48pm

See:

wf9a5m75 · October 3, 2018, 11:49pm

declare var google;

instead of

declare var google: google;

AxeOwl · October 4, 2018, 5:21pm

This doesn’t solve my problem

AxeOwl · October 4, 2018, 5:22pm

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

wf9a5m75 · October 4, 2018, 5:32pm

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'

wf9a5m75 · October 4, 2018, 5:33pm

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

AxeOwl · October 4, 2018, 5:49pm

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

wf9a5m75 · October 4, 2018, 5:58pm

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>

AxeOwl · October 4, 2018, 8:21pm

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

AxeOwl · October 4, 2018, 8:24pm

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

wf9a5m75 · October 4, 2018, 8:48pm

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

wf9a5m75 · October 4, 2018, 8:49pm

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

wf9a5m75 · October 4, 2018, 8:50pm

github.com

mapsplugin/cordova-plugin-googlemaps-doc/blob/master/v2.0.0/ionic-native/README.md

# @ionic-native/google-maps plugin

[@ionic-native/google-maps plugin](https://www.npmjs.com/package/@ionic-native/google-maps) is a wrapper plugin of [Cordova GoogleMaps plugin](https://github.com/mapsplugin/cordova-plugin-googlemaps).
You can write your code with TypeScript instead of pure JavaScript.

Since the [@ionic-native/google-maps plugin](https://www.npmjs.com/package/@ionic-native/google-maps) was first written by the ionic-team, there might exist some mistakes in the wrapper plugin, such as missing some properties, or wrong method definition.
The author of [Cordova GoogleMaps plugin](https://github.com/mapsplugin/cordova-plugin-googlemaps), Masashi, has been working to fix the plugin, but the plugin has lots of featues. It's hard to figure out all the mistakes alone.
So if you find any problems with the [@ionic-native/google-maps plugin](https://www.npmjs.com/package/@ionic-native/google-maps), please report the issue to the [issue list](https://github.com/mapsplugin/cordova-plugin-googlemaps/issues) with test project.

## The documentation

The official page document is here https://github.com/ionic-team/ionic-native-google-maps/blob/master/documents/README.md

## Installation

```
$ ionic cordova plugin add https://github.com/mapsplugin/cordova-plugin-googlemaps --variable API_KEY_FOR_ANDROID="YOUR_ANDROID_API_KEY_IS_HERE" --variable API_KEY_FOR_IOS="YOUR_IOS_API_KEY_IS_HERE"

$ npm install --save @ionic-native/core@latest @ionic-native/google-maps@latest
```

This file has been truncated. show original

NoahWil5on · October 5, 2018, 2:47pm

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?

AxeOwl · October 6, 2018, 8:08am

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

bandito · October 9, 2018, 6:35pm

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