Ionic 3 Google Map wird nicht im Desktop-Browser angezeigt

Ich habe versucht, Google Maps in meinem lokalen Browser anzuzeigen, aber der Bildschirm scheint leer zu sein.Ionic 3 Google Map wird nicht im Desktop-Browser angezeigt

Ich fühle mich wie die Karte geladen wird im Backend aber nicht angezeigt wird.

Ich konnte den Kartenzeiger sehen.

In meinem Code, index.html Datei, habe ich auf die maps api

<body> 

    <!-- Ionic's root component and where the app will load --> 
    <ion-app></ion-app> 

    <script src="https://maps.google.com/maps/api/js?key=AIzaSyCToBv6QzLZWTuqHa7aPeHn6KCCy-nuwKk"></script>

Auch bezeichnet, in meiner .html Datei,

<ion-content> 
    <div #map id="map" style="width:500px;height:500px;"></div> 
</ion-content>

Und .ts Datei, die Code-Basis wie folgt aussieht:

declare var google; 

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

    @ViewChild('map') mapRef : ElementRef; 

    map : any; 

    game : any; 

    currentTournamentData : any; 

    location : any; 

    constructor(private navCtrl: NavController, private navParams: NavParams, 
    private eliteApi : EliteApi,private platform : Platform) { 
    this.showMap(); 
    } 

    ionViewDidLoad() { 
    this.game = this.navParams.data; 
    this.currentTournamentData = this.eliteApi.getCurrentTournamentData(); 
    this.location = this.currentTournamentData.locations[this.game.locationId]; 
    } 

    showMap() { 
    this.platform.ready().then(() => { 
     var latLng = new google.maps.LatLng(-34.9290, 138.6010); 
     var mapOptions = { 
      center : latLng, 
      zoom : 15, 
      mapTypeId : google.maps.MapTypeId.ROADMAP 
     }; 

     this.map = new google.maps.Map(this.mapRef.nativeElement, mapOptions); 
    }); 
    } 

}

Es ist kein Fehler auf der c Onsole aber kein Glück.

Bitte helfen.

Quelle

2017-12-27 StrugglingCoder

Try 'this.map = new google.maps.Map (this.mapRef.nativeElement, mapOptions);' – hrdkisback

Versuchte, kein Glück :(@hrdkisback – StrugglingCoder

@StrugglingCoder, Können Sie Frage wieder mit neuem Code bearbeiten Sie bitte geändert –

Gerade mit der leeren Vorlage versucht und herausgefunden, was das Problem verursacht. Entfernen Sie @IonicPage() und es funktioniert einwandfrei. Manchmal ist es besser, mit der Schieferreinigung zu beginnen.

Quelle

2017-12-27 10:08:31 StrugglingCoder

Ionic 3 Google Map wird nicht im Desktop-Browser angezeigt

Antwort

Verwandte Themen