question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

the map is showing blank

See original GitHub issue

photo_2020-10-02_14-41-27

This 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:closed
  • Created 3 years ago
  • Comments:5 (3 by maintainers)

github_iconTop GitHub Comments

1reaction
MelanieMarvalcommented, Oct 5, 2020

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

0reactions
hemangskcommented, Oct 5, 2020

No worries! I’m glad you got this resolved 😃 closing the ticket

Read more comments on GitHub >

github_iconTop 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 >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found