IONIC 3: Uncaught (в обещании): ReferenceError: Google не определен ReferenceError

Question

Как твои дела?. Я изучаю Google Maps с учебником Ionic 3. Я сделал все, что там объясняется, но при запуске проекта появляется эта ошибка. Я исследовал много, но ничего не работает. Спасибо!.

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

Это мой код:

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

Убедитесь, что вы используете HTTPS при загрузке javascript!

Измените это

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

Чтобы

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

Answer 2

Убедитесь, что вы не используете "async" и "defer" в своем скрипте при загрузке Google Maps API. Если вы используете их, пожалуйста, удалите их. Это будет работать нормально. Используйте это так:

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

Пожалуйста, ознакомьтесь с этой проблемой, опубликованной на форуме Ionic для получения подробных указаний:

Проблема размещена на Ionic Forum

Надеюсь, что это поможет вам. Ура!!!

Answer 3

Вам нужно declare как показано ниже, где вы не сделали этого в своем коде.

declare var google: any;

Примерно такой же вопрос по Git-репо

Answer 4

Даже если вы объявите Google, вы должны "дождаться" загрузки устройства.

Вы пытались использовать setTimeout()?

Например:

ionViewLoad(){
    setTimeout(()=>{ this.initMap(); },100);
}