Google Maps: ReferenceError: google is not defined.

[mahmoudissmail]

How i can solve my problem with google maps, i've inserted the google api link in index.html and after run the app i've got an error.

My code snippets:

import { Component } from '@angular/core';

import { NavController } from 'ionic-angular';

declare var google: any;

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

  constructor(public navCtrl: NavController) {

  }

  ionViewDidLoad() {
      let mapEle = document.getElementById('map');

      let map = new google.maps.Map(mapEle, {
        center: '-34.9290, 138.6010',
        zoom: 16
      });

      let infoWindow = new google.maps.InfoWindow({
        content: `<h5>IONIC</h5>`
      });

      let marker = new google.maps.Marker({
        position: '-34.9290, 138.6010',
        map: map,
        title: 'title'
      });

      marker.addListener('click', () => {
        infoWindow.open(map, marker);
      });

      google.maps.event.addListenerOnce(map, 'idle', () => {
        mapEle.classList.add('show-map');
      });
  }

}

NB: Knowing that I followed a method in this example (conference app).

My system information:

Cordova CLI: 5.4.1
Gulp version:  CLI version 3.9.0
Gulp local:  
Ionic Framework Version: 2.0.0-rc.1
Ionic CLI Version: 2.1.1
Ionic App Lib Version: 2.1.1
Ionic App Scripts Version: 0.0.36
ios-deploy version: 1.8.6 
ios-sim version: 5.0.6 
OS: Mac OS X El Capitan
Node Version: v5.12.0
Xcode version: Xcode 8.0 Build version 8A218a 

[DipakMahapurkar]

Hello Ionic Team, google is not defined error in ionViewDidLoad, Please help me, thank you.

[mahmoudissmail]

Problem Solved.

import { Component } from '@angular/core';

import { NavController } from 'ionic-angular';

declare var google: any;

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

  constructor(public navCtrl: NavController) {
    platform.ready().then(() => {
      this.loadMap();
    });
  }
loadMap() {
      let mapEle = document.getElementById('map');
      let map = new google.maps.Map(mapEle, {
        center: new google.maps.LatLng(43.071584, -89.380120),
        zoom: 16
      });

      let infoWindow = new google.maps.InfoWindow({
        content: `<div class="marker_maps"><h2>Title</h2></div>`
      });

      var image = {
        url: 'assets/img/marker.png', // image is 256 x 256
        scaledSize : new google.maps.Size(60, 60),
      };

      let marker = new google.maps.Marker({
        position: new google.maps.LatLng(43.071584, -89.380120),
        map: map,
        icon: image,
        title: 'Title'
      });

      marker.addListener('click', () => {
        infoWindow.open(map, marker);
      });

    google.maps.event.addListenerOnce(map, 'idle', () => {
      mapEle.classList.add('show-map');
    });
  }
}

Note: @inceptiveDipak

Replace

• Center Attribute ('-34.9290, 138.6010') with (new google.maps.LatLng(43.071584, -89.380120))
• Position marker attribute ('-34.9290, 138.6010') with (new google.maps.LatLng(43.071584, -89.380120))
• Remove all the code from ionViewDidLoad and call directly in

platform.ready().then(() => { 
 this.loadMap();
});

And should it work perfectly 😄 .

[lakshay2395]

I am still facing same issue even after using your code correction.

[DevCif]

Add the code, it worked for me
ionViewDidLoad() {
this.loadMap();
}

[yuukiii]

Also make sure you have :

<script src="http://maps.google.com/maps/api/js?key=YOUR_API_KEY_HERE"></script>

<script src="cordova.js"></script>`

in your src/index.html file - above cordova.js

YOUR_API_KEY_HERE can be had from here

[DacostaDesarrollo]

La solución es cambiar http por https <script src="https://maps.google.com/maps/api/js?key=YOUR_API_KEY_HERE"></script>

[ionitron-bot]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of the Ionic Conference App, please create a new issue and ensure the template is fully filled out.