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!
