Пустая карта с использованием собственных Google Карт в Ionic2 - Правильные ключи

Question

Я новичок в Ionic, только что начал свой первый проект. Я пытаюсь получить карты Google для отображения на странице прямо сейчас, что у меня почти есть. Это просто the map displays blank like so. Апи definitely enabled on the google api console также, так что не может быть. Однако ясно, что мое приложение не генерирует никаких запросов, что является нечетным, потому что факт присутствия элементов управления картой означает, что я должен достичь обслуживания карт в порядке?

Я знаю, что пустые карты могут произойти в результате неправильного ключа api, но у меня есть тройной флажок, и ключ, который я установил, является родным плагином Google Maps. Я пробовал новые ключи, удаляя и переустанавливая плагин, и оба метода вместе взятые, одна и та же проблема сохраняется во всех случаях.

Моя реализация приподнимается почти дословно из обучающих/ионных документов, поэтому не могу видеть, что не было бы проблема там:

import { Component, ViewChild, ElementRef } from '@angular/core'; 
import { NavController, NavParams, Platform } from 'ionic-angular'; 
import { 
GoogleMap, 
GoogleMapsEvent, 
GoogleMapsLatLng, 
CameraPosition, 
GoogleMapsMarkerOptions, 
GoogleMapsMarker 
} from 'ionic-native'; 

@Component({ 
    selector: 'page-profile', 
    templateUrl: 'profile.html' 
}) 
export class ProfilePage { 
    @ViewChild('map') mapElement: ElementRef; 
    map: any; 
    infowindow: any; 


    constructor(public navCtrl: NavController, public navParams: NavParams, public platform: Platform) { 
    platform.ready().then(() => { 
      this.loadMap(); 
     }); 
    } 

    ngAfterViewInit() { 
    //this.loadMap(); 
    } 

    ionViewDidLoad() { 
    console.log('ionViewDidLoad ProfilePage'); 
    } 

    loadMap(){ 

     let location = new GoogleMapsLatLng(-34.9290,138.6010); 

     this.map = new GoogleMap('map', { 
      'backgroundColor': 'white', 
      'controls': { 
      'compass': true, 
      'myLocationButton': true, 
      'indoorPicker': true, 
      'zoom': true 
      }, 
      'gestures': { 
      'scroll': true, 
      'tilt': true, 
      'rotate': true, 
      'zoom': true 
      }, 
      'camera': { 
      'latLng': location, 
      'tilt': 30, 
      'zoom': 15, 
      'bearing': 50 
      } 
     }); 

     this.map.on(GoogleMapsEvent.MAP_READY).subscribe(() => { 
      console.log('Map is ready!'); 
     }); 

    } 

} 

Любой помощь приветствуется; Это сводит меня с ума.

Answer 1

Как выясняется, даже если я обеспечил через SDK менеджер, который я имел Google Play установлены службы, а также как использование образа x86 для эмулятора, поскольку это требование для Google Api v3 (или так я читаю), эмулятор не работает с Play Services.

Это требуется для v3 API Google. Работа на реальном Android-устройстве 7 работает отлично.

Answer 2

Api Ключи для карт google имеют ограничения URL.

Чтобы предотвратить третью сторону с помощью идентификатора клиента на своем собственном сайте, использование идентификатора клиента ограничивается список URL-адресов , которые вы разрешаете.

Чтобы увидеть URL, вы уже санкционированных или разрешать дополнительные адреса:

1.Log в портале поддержки Google Cloud.

2.В левом меню выберите Карты: Управление идентификатором клиента.

URL, которые проверяются на основе происхождения запроса и может быть URL-разработки, такие как http://localhost:8080