Ionic2@beta3 Google map blank in Android

Ionic Framework ionic-v3
1

Hi All,

After upgrading the ionic2 to beta3, the google map is showing blank when i run in Android. It works fine on browser.

I have added meta tag but it doesn’t work.

<meta http-equiv="Content-Security-Policy" content="default-src *; script-src 'self' 'unsafe-inline' 'unsafe-eval' *; style-src  'self' 'unsafe-inline' *">

also

<script src="http://maps.google.com/maps/api/js"></script>

Below is my code

constructor() {
        this.map = null;
        this.loadMap();
    }

    loadMap(){

        let options = {timeout: 10000, enableHighAccuracy: true};

        navigator.geolocation.getCurrentPosition(

            (position) => {
            let latLng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);

        let mapOptions = {
            center: latLng,
            zoom: 15,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        }

        this.map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
    },

        (error) => {
            console.log(error);
        }, options

    );

    }

image

image
Please help.

Cheers,

2

I also got the following error on the console

deviceready has not fired after 5 second
Channel not fired: onDomContentLoaded

Any clue

3

Hello, did you try the Josh Morony geolocation tutorial ?

geolocation tutorial

I’ve tried it yesterday and it work’s good. Just know that on Android, if geolocation is disable on your phone’s settings, the map stay blank. But after enabling geolocation, map appears.

4

Hi @gsoulie,

Yes, i did follow exactly the code. How do i setup the geolocation on Android Emulator ?

Cheers,

5

The network connection is also OK. I’m using a network listener to check if the connection is OK.

Any other clue ?

6

Did you use the following css code to expand the map as well?

#map {
	width: 100%;
	height: 100%;
}

Not sure if you need to use scroll property too.

7

Yes, I did. I think the issue isnavigator.geolocation.getCurrentPosition doesn’t invoke the success call back method (just gone). However no Error occurred or timeout error.

image
image

if I hard coded the latitude and longitude, the map shows up so I don’t think it is a css issue.

Cheers