Ionic V1: Goole Maps shows grey screen [SOLVED]


#1

Hello there! I just implemented native mobile Google Maps API resource. My app reaches read state ultil console log.

console.log('map ready');

But i’m getting a weird grey screen. The Google logo is shown in the screen, except the entire map.
I’m loading the map in the third application ion tab.

See my MapController code:

.controller('MapController', ['$scope', '$ionicPlatform', '$cordovaGeolocation', function($scope, $ionicPlatform, $cordovaGeolocation) {
  document.addEventListener('deviceready', function() {

    // Define a div tag with id="map"
    var div = document.getElementById("map");

    // Initialize the map view
    map = plugin.google.maps.Map.getMap(div);

    // Wait until the map is ready status.
    map.on(plugin.google.maps.event.MAP_READY, function(map) {

      map.setMapTypeId(plugin.google.maps.MapTypeId.ROADMAP);
      console.log('map ready');
    });
});
});

My mapa.html code

<style type="text/css">
.scroll {
    height: 100%;
}
 
#map {
    width: 100%;
    height: 100%;
}

ion-app._gmaps_cdv_ .nav-decor {
    background-color: rgba(0,0,0,0);
}

ion-tab:not(.show-tab) ion-content {
	display: none;
}

</style>

<ion-view>
	<ion-content>
	  	<div id="map" data-tap-disabled="true"></div>
	</ion-content>
</ion-view>

Please see a screen in the link below
Mobile App link

Doest anybody know to solve this?

Thanks in advance!


#2

Did you remote debug the problem on the device already?
Follow these instructions here to debug the problem in Safari dev tools: https://ionic.zone/debug/remote-debug-your-app#ios
Follow these instructions here to debug the problem in Chrome dev tools: https://ionic.zone/debug/remote-debug-your-app#android
Look at the console and network tabs for errors.


#3

Sure i inspected and I can see:

Main._createAppUI: 59.7ms
inspector.js:8510 Main._showAppUI: 70.5ms
inspector.js:8511 Main._initializeTarget: 29.6ms

Saying that map was initialized, but not rendering in my phone :frowning:


#4

What platform are you testing?
Emulator or real device?
Did it work before?

Did it request the map tiles from the Google Maps servers?


#5

Moto G4, real platform. It’s my first time trying. It’s loading the

<div class="scroll">

from Google. So i’m pretty sure that it’s being loaded.


#6

Well, i don’t know exaclty how, but it seem that i had a Google API Key issue. Those steps that i did in this post works as well. That i remember, i just removed the Android key restriction from Google API console. Now it works fine.