the map is showing blank
See original GitHub issueThis is how the map looks when I run it on android.
I created a totally blank project just to test the map, but no matter how hard I try, it does not display well and does not throw any error.
This is my .ts
` import { Component, ElementRef, OnInit, ViewChild } from ‘@angular/core’; import { Plugins } from ‘@capacitor/core’; import { CapacitorGoogleMapsPlugin } from ‘capacitor-googlemaps-native’;
const { CapacitorGoogleMaps } = Plugins;
… …
@ViewChild('map', {static: false}) mapView: ElementRef;
capacitorGoogleMapsPlugin: CapacitorGoogleMapsPlugin = CapacitorGoogleMaps;
constructor() {
}
async ngOnInit() {
// await this.capacitorGoogleMapsPlugin.initialize({
// key: 'AIzaSyD3t5VAdEBMdICcY9FyVcgBHlkeu72OI4',
// });
}
async ionViewDidEnter() {
const boundingRect = this.mapView.nativeElement.getBoundingClientRect() as DOMRect;
this.capacitorGoogleMapsPlugin.create({
width: Math.round(boundingRect.width),
height: Math.round(boundingRect.height),
x: Math.round(boundingRect.x),
y: Math.round(boundingRect.y),
latitude: -33.86,
longitude: 151.20,
zoom: 12,
});
this.capacitorGoogleMapsPlugin.addListener('onMapReady', async () => {
/*
We can do all the magic here when map is ready
*/
this.capacitorGoogleMapsPlugin.addMarker({
latitude: -33.86,
longitude: 151.20,
title: 'Custom Title',
snippet: 'Custom Snippet',
});
this.capacitorGoogleMapsPlugin.setMapType({
type: 'normal',
});
});
}
ionViewDidLeave() {
this.capacitorGoogleMapsPlugin.close();
}
`
Issue Analytics
- State:
- Created 3 years ago
- Comments:5 (3 by maintainers)
Top Results From Across the Web
How to Fix Blank Google Maps on Android and Chrome
Blank Google Maps on your Android or Google Chrome? Try these fixes to get better navigation and location search.
Read more >Google maps display blank
Google maps is displaying blank map screen. It gives audio instructions and shows text at the bottom. ... Already uninstalled, reinstalled maps.
Read more >Google Maps not showing and displays blank screen
If Google Maps is not showing anything or display a blank page on Chrome browser, here are working solutions to resolve the issue....
Read more >How to Fix Blank Google Maps on Android smartphones
Open Settings in your Android phone and navigate to Applications or Apps setting. Find the Google Maps app from the list and tap...
Read more >How to Fix Blank Google Maps In Chrome - How-To Geek
When you're finished, open a new tab and go back to maps.google.com. It should be showing up as normal now. You can achieve...
Read more >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
Sorry, my mistake, you have activated only the SDK for Javascript and not for android, now that I add it it looks perfectly, thanks for your time and sorry for the inconvenience.
And no, it does not present me with typescript lint errors
No worries! I’m glad you got this resolved 😃 closing the ticket