Blank page with google maps and Ionic 3

问题

Googlemaps displays a white page in Ionic 3 on browser and mobile. I have installed the plugin correctly and imported everything. When testing it prompts me to allow location then displays a white page without even a Google logo.

I have tried reinstalling all plugins and checking the API key, all seems valid.

.html

<ion-content padding>
    <div #map id="map"></div>
  </ion-content>

.module.ts

import { NgModule } from '@angular/core';
import { IonicPageModule } from 'ionic-angular';
import { FindridePage } from './findride';
import { Geolocation } from '@ionic-native/geolocation';

import { TranslateModule, TranslateLoader } from '@ngx-translate/core';
import { TranslateHttpLoader } from '@ngx-translate/http-loader';
import { HttpClient } from '@angular/common/http';

export function createTranslateLoader(http: HttpClient) {
  return new TranslateHttpLoader(http, './assets/i18n/', '.json');
}

@NgModule({
  declarations: [
    FindridePage,
  ],
  imports: [
    IonicPageModule.forChild(FindridePage),
    TranslateModule.forRoot({
      loader: {
        provide: TranslateLoader,
        useFactory: createTranslateLoader,
        deps: [HttpClient]
      }
    })
  ]  ,
  exports: [
    FindridePage
  ]
})
export class FindridePageModule {}

.ts

import { NavController,IonicPage,Platform  } from 'ionic-angular';
import { GoogleMap,GoogleMaps } from '@ionic-native/google-maps';
import { Component, ViewChild, ElementRef } from '@angular/core';
import { Geolocation } from '@ionic-native/geolocation';

declare var google: any;

@IonicPage()
@Component({
  selector: 'page-findride',
  templateUrl: 'findride.html'
})
export class FindridePage {
@ViewChild('map') mapElement: ElementRef;
map: any;
markers = [];

  constructor(public navCtrl: NavController, private _googleMaps: GoogleMaps,public platform: Platform,private geolocation: Geolocation) {

      setTimeout(this.initMap(), 10000);

  }



  initMap() {
    console.log('starting');
    this.geolocation.getCurrentPosition({ maximumAge: 3000, timeout: 5000, enableHighAccuracy: true }).then((resp) => {
      let mylocation = new google.maps.LatLng(resp.coords.latitude,resp.coords.longitude);
      this.map = new google.maps.Map(this.mapElement.nativeElement, {
        zoom: 15,
        center: mylocation
      });
    });
    let watch = this.geolocation.watchPosition();
    watch.subscribe((data) => {
      this.deleteMarkers();
      let updatelocation = new google.maps.LatLng(data.coords.latitude,data.coords.longitude);
      let image = 'assets/imgs/blue-bike.png';
      this.addMarker(updatelocation,image);
      this.setMapOnAll(this.map);
    });
  }
  addMarker(location, image) {
    let marker = new google.maps.Marker({
      position: location,
      map: this.map,
      icon: image
    });
    this.markers.push(marker);
  }

  setMapOnAll(map) {
    for (var i = 0; i < this.markers.length; i++) {
      this.markers[i].setMap(map);
    }
  }

  clearMarkers() {
    this.setMapOnAll(null);
  }

  deleteMarkers() {
    this.clearMarkers();
    this.markers = [];
  }
 listride(){
    this.navCtrl.push('ListridePage');
 }


}

回答1:

Set height and width of the map element as below and you will see the map. if it is loaded.

<div #map id="map" style="height:500px; width:300px;">

来源：https://stackoverflow.com/questions/57403269/blank-page-with-google-maps-and-ionic-3

标签

javascript

ionic-framework

ionic3