Jose Nieto Jose Fernando Nieto

Agregar Google Maps a Ionic

Se crear un proyecto de ionic.

ionic start ionic-maps blank

ionic setup sass

ionic platform add ios
ionic platform add android

Se agregar el plugin de geolocalización

ionic cordova plugin add cordova-plugin-geolocation

Aunque ngCordova no es obligatorio facilita el uso del plugin

bower install ngCordova

<script src="lib/ngCordova/dist/ng-cordova.js"></script>
<script src="cordova.js"></script>

angular.module('starter', ['ionic', 'ngCordova'])

Ahora se incluye el SDK de Google Maps; este debe venir con una llave que te de acceso al API de mapas la cual se obtiene desde Google Developers Console

<script src="js/app.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&sensor=true"></script>

Se crea una nueva vista, plantilla o pagina en la cual se va a ver el mapa, por ejemplo map.html. El mapa se cargará en el elemento #map.

<ion-view>
    <ion-content scroll="false">
        <div id="map" data-tap-disabled="true"></div>
    </ion-content>
</ion-view>

<body ng-app="starter">
  <ion-pane>
    <ion-header-bar class="bar-stable">
      <h1 class="title">Ionic Maps</h1>
    </ion-header-bar>
    <ion-nav-view></ion-nav-view>
  </ion-pane>
</body>

.config(function($stateProvider, $urlRouterProvider) {

  $stateProvider
  .state('map', {
    url: '/',
    templateUrl: 'templates/map.html',
    controller: 'MapCtrl'
  });

  $urlRouterProvider.otherwise("/");

})

En el controlador de la vista se escribe el código para manipular el mapa.

.controller('MapCtrl', function($scope, $state, $cordovaGeolocation) {

  var options = {timeout: 10000, enableHighAccuracy: true};

  $cordovaGeolocation.getCurrentPosition(options)
    .then(
      function(position) {

        var latLng = new google.maps.LatLng(
            position.coords.latitude,
            position.coords.longitude
          );

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

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

  },
  function(error) {
    console.log("Could not get location");
  });

});

Al cargar la aplicación el mapa aún no se ve, es necesario darle dimensiones al mapa. Nota los estilos de .scroll solo son necesarios si la vista tiene scroll.

.scroll {
    height: 100%;
}

#map {
    width: 100%;
    height: 100%;
}

En ionic al colocar un mapa en una vista y se quiere que el mapa ocupe toda la pantalla, se debe colocar el atributo scroll igual a false al contenedor.

<ion-content scroll="false">
  <div
    id="map"
    class="mymap"
    data-tap-disabled="true"></div>
</ion-content>