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


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-footer-bar class="bar-stable">
  <a ng-click="centerOnMe()" class="button button-icon icon ion-navigate"></a>

controller.js :

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

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


$scope.centerOnMe = function () {
if (!$scope.map) {

$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));
      }, 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) {
      return false;
    console.log('map finish');
  function setMarker(map, content){
    var marker = null;
    var eyeIcon={
      size: null,
      origin: null,
      anchor: null,
      scaledSize: new google.maps.Size(64,64)
    // Call and mark all near POI (guardians)  from guardians service
        marker = new google.maps.Marker({
          icon: eyeIcon,
          position: new google.maps.LatLng(value.latitude, value.longitude),
          map: map,
          title: 'title'
  if (document.readyState === "complete") {
  } else {
    google.maps.event.addDomListener(window, 'load', initialize);


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.

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

Finally, I found that a ionic update is needed.