# Ionic2@beta3 Google map blank in Android

**URL:** <https://forum.ionicframework.com/t/ionic2-beta3-google-map-blank-in-android/46127>\
**Category:** ionic-v3\
**Created:** [March 11, 2016, 10:37am UTC](https://forum.ionicframework.com/t/ionic2-beta3-google-map-blank-in-android/46127 "2016-03-11T10:37:27Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![nandanoor](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/nandanoor/32/98106_2.png) [@nandanoor](https://forum.ionicframework.com/u/nandanoor)\
**Post date:** [March 11, 2016, 10:37am UTC](https://forum.ionicframework.com/t/ionic2-beta3-google-map-blank-in-android/46127/1 "2016-03-11T10:37:27Z")

</div>

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](https://global.discourse-cdn.com/ionicframework/original/3X/5/c/5cf4d36df4a17cd3254822246c2fa8148fd49f90.PNG)

![image](https://global.discourse-cdn.com/ionicframework/original/3X/2/f/2f48536b0096c2f49061c3679f66a2ecac7aa11c.PNG)  
Please help.

Cheers,

---

<div class="post-metadata">

**Author:** ![nandanoor](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/nandanoor/32/98106_2.png) [@nandanoor](https://forum.ionicframework.com/u/nandanoor)\
**Post date:** [March 11, 2016, 12:25pm UTC](https://forum.ionicframework.com/t/ionic2-beta3-google-map-blank-in-android/46127/2 "2016-03-11T12:25:52Z")

</div>

I also got the following error on the console

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

Any clue

---

<div class="post-metadata">

**Author:** ![gsoulie](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/gsoulie/32/98677_2.png) [@gsoulie](https://forum.ionicframework.com/u/gsoulie)\
**Post date:** [March 11, 2016, 1:43pm UTC](https://forum.ionicframework.com/t/ionic2-beta3-google-map-blank-in-android/46127/3 "2016-03-11T13:43:22Z")

</div>

Hello, did you try the Josh Morony geolocation tutorial ?

[geolocation tutorial](http://www.joshmorony.com/ionic-2-how-to-use-google-maps-geolocation-video-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.

---

<div class="post-metadata">

**Author:** ![nandanoor](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/nandanoor/32/98106_2.png) [@nandanoor](https://forum.ionicframework.com/u/nandanoor)\
**Post date:** [March 11, 2016, 9:52pm UTC](https://forum.ionicframework.com/t/ionic2-beta3-google-map-blank-in-android/46127/4 "2016-03-11T21:52:23Z")

</div>

Hi @gsoulie,

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

Cheers,

---

<div class="post-metadata">

**Author:** ![nandanoor](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/nandanoor/32/98106_2.png) [@nandanoor](https://forum.ionicframework.com/u/nandanoor)\
**Post date:** [March 11, 2016, 10:34pm UTC](https://forum.ionicframework.com/t/ionic2-beta3-google-map-blank-in-android/46127/5 "2016-03-11T22:34:38Z")

</div>

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

Any other clue ?

---

<div class="post-metadata">

**Author:** ![ZiFFeL](https://avatars.discourse-cdn.com/v4/letter/z/ad7895/32.png) [@ZiFFeL](https://forum.ionicframework.com/u/ZiFFeL)\
**Post date:** [March 12, 2016, 1:01am UTC](https://forum.ionicframework.com/t/ionic2-beta3-google-map-blank-in-android/46127/6 "2016-03-12T01:01:04Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![nandanoor](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/nandanoor/32/98106_2.png) [@nandanoor](https://forum.ionicframework.com/u/nandanoor)\
**Post date:** [March 12, 2016, 2:13am UTC](https://forum.ionicframework.com/t/ionic2-beta3-google-map-blank-in-android/46127/7 "2016-03-12T02:13:33Z")

</div>

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

![image](https://global.discourse-cdn.com/ionicframework/original/3X/c/9/c92c5fc52aefd4d94f89fae360479568199955b8.PNG)  
 ![image](https://global.discourse-cdn.com/ionicframework/original/3X/a/9/a98f32ff33694d24670718b362a70555bb0e16ef.PNG)

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

Cheers