0

私はIonicの新しいブランドです。私はほとんどのページに表示するGoogleマップを取得しようとしています。それはちょうどthe map displays blank like so.ですapiはdefinitely enabled on the google api consoleもありますので、それはできません。しかし、マップコントロールが存在するということはマップサービスに到達する必要があることを意味するので、私のアプリはリクエストを生成していないことは明らかです。Ionic2のネイティブGoogleマップを使用した空白のマップ - 正しいキー

誤ったAPIキーの結果として空白のマップが発生する可能性がありますが、私は3重チェックを行い、コードワインネイティブGoogleマッププラグインをインストールしたキーが正しいことを確認します。私は新しいキーを試して、プラグインを削除して再インストールして、両方の方法を組み合わせて、同じ問題がすべてのケースに残っています。

私の実装は、チュートリアル/イオンドキュメントから、ほぼそのまま持ち上げられ、そうそこに問題がある可能だろうと見ることができません。感謝すべてのヘルプ

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!'); 
     }); 

    } 

} 

。これは私をナットにしている。

+0

アクセスしているドメイン固有のAPIキーですか? – Coder

+0

ドメイン、プラットフォーム、その他の制限はありません。 –

+0

通常、一部のAPIキーはドメインに固有であり、一部のAPIキーには任意のドメインを追加する機能があります。しかし、アクセスするドメインに関するGoogle APIの制限があります。 – Coder

答えて

0

として開発URLをすることができエミュレータのx86イメージをGoogle Api v3の要件(または読んでいるもの)として使用しているため、エミュレータはPlayサービスでは動作しません。

これはv3 Google APIに必要です。実際のアンドロイド7デバイスで動作することは完全に機能します。

0

GoogleマップのApiキーにはURLの制限があります。

が自分 ウェブサイトにあなたのクライアントのIDを使用してから、第三者を防ぐには、クライアントIDの使用は、あなたが特に承認したURL のリストに制限されています。 Googleクラウドサポートポータルにして

1.Log:あなたはすでに承認されているか、追加の のURLを許可するURLを表示するには

2.左側のメニューで、[マップ:クライアントIDの管理]をクリックします。

URLは、私はGoogleが同様に、インストールサービスを再生したSDKマネージャを介して確保していても、要求の起源に基づいてチェックされ、それは結局のところ、このようなhttp://localhost:8080

+0

提案していただきありがとうございますが、クラウドサポートポータルで、私のために作成された資格情報がないので、どのようにアクセスするのか分かりません –

関連する問題