0

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

enter image description here

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
wf9a5m75
  • 6,100
  • 3
  • 25
  • 59
tarek fellah
  • 365
  • 1
  • 10
  • 32
  • "The Google Play services resources were not found. Check your project configuration to ensure that the resources are included." error messages are always outputted even if the map works correctly. Just ignore them. – wf9a5m75 Nov 11 '14 at 20:08

4 Answers4

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

wf9a5m75
  • 6,100
  • 3
  • 25
  • 59
  • Thanks for your response, "the plugin can not follow the position of the map div", do you mean that it doesn't be wrapped in the div? – tarek fellah Nov 12 '14 at 07:54
  • The map is completely different view from browser, it means it's not a HTML element. So there is no map in the map div. The map plugin follows the page scroll automatically, however if you change the map div using JavaScript and/or CSS, the map plugin can not detect it. So you need to call `map.refreshLayout()` – wf9a5m75 Nov 12 '14 at 08:32
  • when i have map.showDialog(); the map is displayed, in the the full page, i called map.refreshLayout() in app.js after creating the but it doesn't show, so how to put the map in a page, also should i call map.refreshLayout() in the page link event click? – tarek fellah Nov 12 '14 at 08:47
  • map.showDialog() displays the map as full screen, so you don't need to call `map.refreshLayout()`. In order to set the map in the div, `map.getMap(div)` or `map.setDiv(div)`. If you open the map as full screen, you need to call `map.closeDialog()` before `map.setDiv(div)` – wf9a5m75 Nov 12 '14 at 09:00
  • no i don't want to open as full screen, now i solved the problem, thanks, i have a problem with thze toggle menu but i fixed it by showing hiding it when clicking in the menu toggle button. Thanks. – tarek fellah Nov 12 '14 at 14:04
1

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')">
tarek fellah
  • 365
  • 1
  • 10
  • 32
  • this solution works when clicking in the toggle button but still searching for a solution when swiping left and right to hide/show the menu – tarek fellah Nov 13 '14 at 10:13
0

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.

AbcAeffchen
  • 14,400
  • 15
  • 47
  • 66
C.T
  • 151
  • 2
  • 9
0

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'
};
});
Marco Cefalà
  • 1