Google map does not display on Ionic Android Build .apk using Cordova( works fine on the Chrome browser)

Question

Plz help

Issue: Not able to display a google map on the page for an ionic android build app using cardova (WORKS FINE ON THE CHROME ie WITHOUT ANDROID BUILD)

Page:

<script id="mapPage.html" type="text/ng-template">
   <ion-view title="Map" ng-init="init()" >
     <ion-nav-buttons side="left">
       <button class="button"> Back </button>
     </ion-nav-buttons> 
     <ion-content>
        <div id="map" data-tap-disabled="true"></div>
     </ion-content>
  </ion-view>

Router:

.config(function($stateProvider, $urlRouterProvider) {
 $stateProvider
    .state('mapPage', 
     url: '/9',
     templateUrl: 'mapPage.html',
     controller: 'mapPageTabCtrl'
  })

Controller:

.controller('mapPageTabCtrl', function($scope, $timeout, googleAppEngineService, $ionicPopup,  
     controller_Provider, $ionicLoading, $compile) {

    $scope.init= function() 
    {   
        var propAddress = $scope.propInfoDetailsObj.prop_address;
        var geocoder = new google.maps.Geocoder();
        var result = "";
        geocoder.geocode( { 'address': propAddress}, function(results, status) 
        {
             if (status == google.maps.GeocoderStatus.OK) 
             {
                 var myLatlng = new google.maps.LatLng(results[0].geometry.location.lat(), results[0].geometry.location.lng() );

                var mapOptions = {
                  center: myLatlng,
                  zoom: 14,
                  mapTypeId: google.maps.MapTypeId.ROADMAP
                };

                var map = new google.maps.Map(document.getElementById("map"), mapOptions); 

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

                    google.maps.event.addListener(marker, 'click', function() {
                      infowindow.open(map,marker);
                    });

                 $scope.map = map;
             } 
             else 
             {
                 result = "Unable to find address: " + status;
                 console.log("###" + result);
             }

        })//geocoder.geocode( { 'ad
    };  
    //});// function()
})//controller('mapPageTabCtrl',

PRIOR to android build($ionic build android), tested it on the Chrome browser using tomcat and works fine. I could see google map on the page.

Next,
Using $ionic build android, created an apk file and tested both on AVD emulator and real android phone and notice that the page wont load google map, looks like its ignoring $scope.init= function(){}.

Will appreciate your help...

First you should try to load basic map and check $scope.init is work properly — shamon shamsudeen, Dec 27 '14 at 14:04
while debug on chrome, it did execute $scope.init function and that why I was able to see the googleMap on the page. Same code is then build for andorid using $ionic build android, and when apk tested on the actual android phone, its not showing googleMap onto the page. — Naresh, Dec 28 '14 at 18:18

score 0 · Accepted Answer · answered Jan 07 '15 at 20:25

0

Issue resolved - code error, which was preventing to load maps

answered Jan 07 '15 at 20:25

Naresh

115
1
1
9

4

I am getting a similar error now, works on browser but not when I put it on phone. How did you resolve it? – user1180888 Feb 26 '15 at 00:41

score 0 · Answer 2 · answered Jun 20 '15 at 13:05

0

If u can view the map on browser, but not when you deploy for android, run the following command: ionic plugin add cordova-plugin-whitelist. Http request are disabled by default so all external scripts will not be loaded.

answered Jun 20 '15 at 13:05

code-assassin

415
4
14

Google map does not display on Ionic Android Build .apk using Cordova( works fine on the Chrome browser)

2 Answers2