[ios][google-maps] add marker doesnt work with emulator CLOSED

#1

Hi,

I’m trying to create a map and add marker in a directive.
I started with command : ionic start testMap map
Its work well on browser but on iOS emulator markers are missing

Could you help me please ?

index.html :

<ion-content scroll="false">
  <map on-create="mapCreated(map)"></map>
</ion-content>
<ion-footer-bar class="bar-stable">
  <a ng-click="centerOnMe()" class="button button-icon icon ion-navigate"></a>
</ion-footer-bar>

controller.js :

angular.module(‘starter.controllers’, [])

.controller(‘MapCtrl’, function($scope, $ionicLoading, guardians) {
$scope.mapCreated = function(map) {
$scope.map = map;
$scope.centerOnMe();

};

$scope.centerOnMe = function () {
console.log(“Centering”);
if (!$scope.map) {
return;
}

$scope.loading = $ionicLoading.show({
  content: 'Location...',
  showBackdrop: false
});

navigator.geolocation.getCurrentPosition(function (pos) {
  console.log('Got pos', pos);
  $scope.map.setCenter(new google.maps.LatLng(pos.coords.latitude, pos.coords.longitude));
  $scope.loading.hide();
      }, function (error) {
  alert('Localisation impossibles: ' + error.message);
});

};
});

directive.js :

angular.module(‘starter.directives’, [‘starter.services’])

.directive(‘map’, function(guardians) {
return {
restrict: ‘E’,
scope: {
onCreate: ‘&’
},
link: function ($scope, $element, $attr) {
function initialize() {
var mapOptions = {
zoom: 13,
mapTypeId: google.maps.MapTypeId.ROADMAP
//disableDefaultUI: true
};
var map = new google.maps.Map($element[0], mapOptions);

    $scope.onCreate({map: map});

    // Stop the side bar from dragging when mousedown/tapdown on the map
    google.maps.event.addDomListener($element[0], 'mousedown', function (e) {
      e.preventDefault();
      return false;
    });
    console.log('map finish');
    setMarker(map,'');

  }

  function setMarker(map, content){
    console.log('setMarker');
    var marker = null;

    var eyeIcon={
      url:'../img/eye.svg',
      size: null,
      origin: null,
      anchor: null,
      scaledSize: new google.maps.Size(64,64)
    };

    // Call and mark all near POI (guardians)  from guardians service
    guardians.getGuardians().then(function(message){
      angular.forEach(message.guardians,function(value,key){
        console.log(value.latitude);
        marker = new google.maps.Marker({
          icon: eyeIcon,
          position: new google.maps.LatLng(value.latitude, value.longitude),
          map: map,
          title: 'title'
        });

      });
    });
  }

  if (document.readyState === "complete") {
    initialize();
  } else {
    google.maps.event.addDomListener(window, 'load', initialize);
  }
}

}
});

#2

Sorry i didn’t check your code, its too much. But a reason why Google maps won’t work on android emulator can be that you are missing Google play services, you can download that with SDK manager i think.

#3

Hi, thank you for your help.
I just try to create a map and add marker with a directive.
I didn’t specify I use iOS emulator, not google play

#4

Finally, I found that a ionic update is needed.
Thanks