@ioclaudio wrote:
Hi,
I have on the first page of an Ionic4 app a Google Map.
When I log in, often the map doesn’t load well, it is half loaded.
If you move the app with your fingers, then it loads completely
I’m using the Google Maps API that is included in the index.html file in this way:
<head> <script id="google_script" src="https://maps.googleapis.com/maps/api/js?key=xxxx"></script> </head>Then I have defined a component, used in the home page of the app.
This is the component:@Component({ selector: 'google-map', templateUrl: './google-map.component.html', styleUrls: ['./google-map.component.scss'] }) export class GoogleMapComponent { position_base = { position_longitude: null, position_latitude: null }; ... constructor(private renderer: Renderer2, private element: ElementRef, private platform: Platform, ..... @Inject(DOCUMENT) private _document) { this.apiKey = this.settingsManager.getGoogleMapsApiKey(); } public init(mapType, mapOptions): Promise<any> { this.mapType = mapType; return new Promise((resolve, reject) => { if (this.map == null) { // this.loadSDK().then((res) => { this.initMap(mapOptions).then((res1) => { this.enableMap(); resolve(true); }, (err) => { reject(err); }); } else { reject('Google maps already initialised'); } }); } private initMap(options): Promise<any> { const context = this; return new Promise((resolve, reject) => { const mapOptions = { zoomControlOptions: { position: google.maps.ControlPosition.LEFT_CENTER }, clickableIcons: options.clickableIcons, zoomControl: options.zoomControl, mapTypeControl: options.mapTypeControl, scaleControl: options.scaleControl, streetViewControl: options.streetViewControl, rotateControl: options.rotateControl, fullscreenControl: options.fullscreenControl, styles: [.....] }; this.map = new google.maps.Map(this.element.nativeElement, mapOptions); this.map.setOptions({minZoom: 6}); resolve(true); }); }Why do you think the map does not load completely?
How can I debug this problem?Thank you
Claudio
Posts: 1
Participants: 1