Google Maps goes blank on android


#1

I’m having some strange issue trying to show a map on my ionic app.
When I test it on the browser or I serve it on live-reload mode on my device, it works great. But when I run the app and actually install it on the phone, the maps get blank.

This is my controller:

.controller('EventDetailsCtrl', function ($scope, EventsService, $stateParams, $ionicHistory) {
    $scope.event = {
        name: "",
        date: 0
    };
    $scope.getEvent = function (id) {
        EventsService.getEvent(id).then(function (res) {
            $scope.event = res.data;
            $scope.initMap($scope.event.locationData.k, $scope.event.locationData.D, $scope.event.name);

            console.log($scope.event);
        }, function (err) {
            $window.alert(err);
        });
    };

    $scope.getEvent($stateParams.id);

    $scope.goBack = function () {
        $ionicHistory.goBack();
    };

    $scope.initMap = function initialize(lat, long, title) {
        var myLatlng = new google.maps.LatLng(lat, long);

        var mapOptions = {
            center: myLatlng,
            zoom: 16,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        var map = new google.maps.Map(document.getElementById("map"),
            mapOptions);

        var marker = new google.maps.Marker({
            position: myLatlng,
            map: map,
            title: title
        });
        $scope.map = map;
    };
});

and this is my template:

<ion-view view-title="EventDetails">
    <ion-header-bar class="bar-dark">
        <button class="button button-icon icon ion-chevron-left" ng-click="goBack()"></button>
        <h1 class="title">Evento</h1>
    </ion-header-bar>
    <ion-content class="padding">
        <h1>{{event.name}}</h1>
            
            <h4>{{event.date | date:"dd/MM/yyyy 'a las' HH:mm"}}</h4>
            <h3>{{event.locationText}}</h3>

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

    </ion-content>
</ion-view>

Hope you guys can help. Thanks very much!

If u wanna see more code, its on github


#2

nobody here? still trying to make it work


#3

try this maybe, worked for me…
google.maps.event.addListenerOnce(map, 'idle', function() { google.maps.event.trigger(map, 'resize'); });


#4

I got exactly the same Problem… Any solution ?