Map didn't appear in ionic with phonegap google maps plugin

Question

I'm developping a Phonegap application with Ionic Framework and AngularJS, i have to put two maps, in different pages. I get this a blank window

In app.js

.run(function () {
 ionic.Platform.ready(function () {
                var div = document.getElementById("map_canvas1");
        alert('deviceready');

        alert(window.plugin);

      //  map = window.plugin.google.maps.Map.getMap(div);
         if (window.plugin) {
            alert(1);
            map = window.plugin.google.maps.Map.getMap(div);
        }

      });
    })

My html page

<div class="modal">
   <ion-header-bar class="bar-positive">
      <button menu-toggle="right" class="button button-icon icon ion-navicon"></button>
      <h1 class="title">Géolocalisation</h1>

     </ion-header-bar>
   <ion-content>
    <div style="width:90%;margin-left:10%;height:500px" id="map_canvas1"></div>
   </ion-content>
 </div>

I get this error in logcat

 11-11 17:33:38.823: E/GooglePlayServicesUtil(10062): The Google Play services resources were not  found. Check your project configuration to ensure that the resources are included.
 11-11 17:33:40.367: E/GooglePlayServicesUtil(10062): The Google Play services resources were not found. Check your project configuration to ensure that the resources are included.
 11-11 17:33:40.732: E/NativeCrypto(10062): ssl=0x53d54c10 cert_verify_callback x509_store_ctx=0x57b8dae8 arg=0x0
 11-11 17:33:40.732: E/NativeCrypto(10062): ssl=0x53d54c10 cert_verify_callback calling verifyCertificateChain authMethod=ECDHE_ECDSA

Answer 1

Thank you for using my plugin. I'm not familiar with the ionic framework though, many people use with it. So it should work.

Unfortunately, the map plugin does not support multiple maps. So you need to map.remove(), then Map.getMap() again.

Many people asks regarding of ionic on the issue list. You might find helpful information. https://github.com/wf9a5m75/phonegap-googlemaps-plugin/search?q=ionic&type=Issues&utf8=%E2%9C%93

Also the forum page of the ionic framework might help for your issue. http://forum.ionicframework.com/t/using-google-maps-cordova-plugin/4456

Answer 2

this is a working solution, in the map page controller

.controller('GeoCtrl', ['$scope', 'FlightDataService','Search','Distance','$http','$ionicLoading','$state', function($scope, FlightDataService,Search,Distance,$http,$ionicLoading,$state) {

var div = document.getElementById("map_canvas"); 
const GORYOKAKU_JAPAN = new plugin.google.maps.LatLng(41.796875,140.757007);
if(plugin.google)
map = plugin.google.maps.Map.getMap(div,{
'backgroundColor': 'white',
'mapType': plugin.google.maps.MapTypeId.HYBRID,
'controls': {
'compass': true,
'myLocationButton': true,
'indoorPicker': true,
'zoom': true
 },
'gestures': {
'scroll': true,
'tilt': true,
'rotate': true
 },
'camera': {
'latLng': GORYOKAKU_JAPAN,
'tilt': 30,
'zoom': 15,
'bearing': 50
 }
 });


 map.refreshLayout();

 }]);

and in the app controller

 .controller('AppCtrl', function($scope, $ionicModal, $timeout,$state,$ionicSideMenuDelegate) {
 $('.menu-left').css('display','none'); 
 $scope.go = function(route){
 display = 'none';
 $('.menu-left').css('display','none');

 $state.go('app.'+route);   
 };

 $scope.toggleLeftSideMenu = function() {
 $ionicSideMenuDelegate.toggleLeft();
 alert(display);
 if(display == 'block')
    display ='none';
    else
    display ='block';
 $('.menu-left').css('display',display);

 }; 
 }); 

And finally in click in the menu page add ng-click="go('geolocalisation')"

<ion-item nav-clear menu-close  ng-click="go('geolocalisation')">

Answer 3

This works for me:

HTML:

<ion-view view-title="Map" ng-open="mapCTRL.init()">
<ion-content>   
        <div class="card" id="map" data-tap-disabled="true"></div>
</ion-content>
 <ion-footer-bar class="bar-assertive">
        <a ng-click="mapCTRL.test()" class="button button-icon icon ion-navigate">Find Me</a>
    </ion-footer-bar>
        </ion-view>

JS:

angular.module('maps', []).directive('myMap', function () {
return {
    restriction: 'E',
    templateUrl: 'templates/map.html',
    controller: function ($scope, $ionicLoading) {

        this.init = function () {
            var myLatlng = new google.maps.LatLng(37.3000, -120.4833);

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

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

            $scope.map = map;
        };            
    },
    controllerAs: 'mapCTRL'
};
});

Answer 4

I think your problem is about sdk are you sure to fallowing this instructions Windows, Mac/Linux

Ok this is my way,

My Map html,

<ion-view view-title="Map" ng-controller="MapControl">
  <ion-content>
      <div class="card">
          <div style="width:100%;height:400px" id="map_canvas"></div>
      </div>
  </ion-content>
</ion-view>

My Controller,

.controller('MapControl', function($scope) {

    var div = document.getElementById("map_canvas");
    map = plugin.google.maps.Map.getMap(div);
})

Good Luck.