Google지도 회색 상자가있는 이오니아 3 전용 네이티브 코드바 플러그인

지도를 표시하려고하고 있는데 그 중 맨 아래에 Google 로고가있는 회색 상자가 있습니다. 이 웹 사이트의 다른 게시물을 살펴본 결과 모두 시도해 보았지만 어느 누구도 문제를 해결하지 못했습니다. cordova 플러그인 googlemaps 2.0.7에서 ionic 3.12.0을 사용하고 있습니다. 대시 보드에서 API 키가 정확하고 활성화되어 있는지 확인했습니다.Google지도 회색 상자가있는 이오니아 3 전용 네이티브 코드바 플러그인

내가 튜토리얼 아래 https://ionicframework.com/docs/native/google-maps/를 사용 해봤 코드

import { 
GoogleMaps, 
GoogleMap, 
GoogleMapsEvent, 
GoogleMapOptions, 
CameraPosition, 
MarkerOptions, 
Marker 
} from '@ionic-native/google-maps'; 


import { Component, Input, ViewChild } from '@angular/core'; 
import { Platform } from 'ionic-angular'; 

@Component({ 
    selector: 'map', 
    template: '<div #map id="map"></div>' 
}) 
export class Map { 

    map: GoogleMap; 
    mapElement: HTMLElement; 
    constructor(private googleMaps: GoogleMaps) { } 

    setMapLocation(coords: any) { 
    this.map.setCameraTarget(coords); 
    } 

    ionViewDidLoad() { 
    this.loadMap(); 
    } 

    loadMap() { 
    this.mapElement = document.getElementById('map'); 

    let mapOptions: GoogleMapOptions = { 
    camera: { 
     target: { 
     lat: 43.0741904, 
     lng: -89.3809802 
     }, 
     zoom: 18, 
     tilt: 30 
    } 
    }; 

    this.map = this.googleMaps.create(this.mapElement, mapOptions); 

    // Wait the MAP_READY before using any methods. 
    this.map.one(GoogleMapsEvent.MAP_READY) 
    .then(() => { 
     console.log('Map is ready!'); 

     // Now you can use all methods safely. 
     this.map.addMarker({ 
      title: 'Ionic', 
      icon: 'blue', 
      animation: 'DROP', 
      position: { 
      lat: 43.0741904, 
      lng: -89.3809802 
      } 
     }) 
     .then(marker => { 
      marker.on(GoogleMapsEvent.MARKER_CLICK) 
      .subscribe(() => { 
       alert('clicked'); 
      }); 
     }); 

    }); 
}}

내가 추가 한 CSS입니다 저도 같은 문제가 있었다

#map { 
    width: 100% !important; 
    height: 100% !important; 
    img{ max-width: none !important; } 
    overflow:visible !important; 
    z-index: 1; 
} 

ion-app._gmaps_cdv_ .nav-decor{ 
    background-color: transparent !important; 
}

출처

2017-09-25 NoobProGmer

이하지 않았다 https://github.com/mapsplugin/cordova-plugin-googlemaps-doc/blob/master/v1.4.0/TroubleShooting/Blank-Map/README.md – wf9a5m75