Google Maps: ReferenceError: google is not defined.

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 

[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 😄 .

[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