IONIC 3: Uncaught (in promise): ReferenceError: google is not defined ReferenceError

Question

How are you?. I am studying a Google Maps with Ionic 3 tutorial. I have done everything what is explained there, but when the project is launched, there is appearing this error. I have investigated A LOT, but nothing works. Thanks!.

Error: Uncaught (in promise): ReferenceError: google is not defined
ReferenceError: google is not defined

This is my code:

home.ts

import { Component, ViewChild, ElementRef } from '@angular/core';
import { NavController } from 'ionic-angular';
import { IonicPage } from 'ionic-angular';

declare var google;

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

    @ViewChild('map') mapElement:ElementRef;
    map: any;
    start = 'chicago, il';
    end = 'chicago, il';
    directionsService = new google.maps.DirectionsService;
    directionsDisplay = new google.maps.DirectionsRenderer;

    constructor(public navCtrl: NavController) {

    }

    ionViewLoad(){
        this.initMap();
    }

    initMap(){
        this.map = new google.maps.Map(this.mapElement.nativeElement, 
    { 
            zoom: 7,
            center: {lat: 41.85, lng: -87.65}
    });

        this.directionsDisplay.setMap(this.map);
    }

    calculateAndDisplayRoute(){
        this.directionsService.route({
            origin: this.start,
            destination: this.end,
            travelMode: 'DRIVING',
        }, (response, status) => {
            if(status == 'OK'){
                this.directionsDisplay.setDirections(response);
            }else{
                window.alert('Directions request failed due to ' + 
        status);
            }
        });
        }

     }

Answer 1

Make sure you use HTTPS when loading javascript!

Change from this

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

To

<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY"></script>

Answer 2

Make sure you are not using "async" and "defer" in your script when you are loading Google Maps API. If you are using these, please remove them. It'll work fine. Use it like this:

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

Please have a look at this issue posted on Ionic forum for detailed guidance:

Issue posted on Ionic Forum

Hope this will help you. Cheers!!!