3

Estoy haciendo una app móvil con Ionic Framework y tengo una lista de lugares en una vista lugares.html, cada ítem tiene un nombre, dirección y ubicación (coordenadas). Quiero que al seleccionar un ítem se dibuje el marcador de mi posición actual y el seleccionado. Intenté hacerlo con un href pasando las coordenadas por parámetros a la vista de mapa, pero solo funciona la primera vez y luego no aparece el mapa. Mi duda es en la parte de "//Dibujar marker de lugar", no se si ponerlo en una función, como llamarla.. Soy nuevo en esto. si necesitan alguna otra parte de código me avisan. (Aclaro que estoy usando tabs y el mapa es una pestaña y lugares es otra). También me gustaría saber si estoy haciendolo de la forma correcta (usando el href). Agradezco su ayuda.

Archivo lugares.html

<ion-view view-title="Lugares">

<ion-content>
    <ion-list>

        <ion-item class="item-text-wrap" ng-repeat="item in lugares" 
                  href="#/tab/mapa/{{item.latitud}}/{{item.longitud}}">
            <h2>{{item.nombre}}</h2>
            <h3>{{item.calle}} {{item.numero}} </h3>
            <h4>{{item.latitud}}, {{item.longitud}}</h4>
        </ion-item>

    </ion-list>
</ion-content>

Estado del mapa

 .state('tabs.mapa',{
         url:'/mapa/:lat/:lng',
         views:{
            'mapa-tab':{
            templateUrl: 'templates/mapa.html',
            controller: 'ControladorMapa'
            } 
         }
 })

Controlador mapa

.controller('ControladorMapa', function($scope, $state, $cordovaGeolocation){
  // Mapa con centro en mi posicion
  var options = {timeout: 10000,  enableHighAccuracy: true};

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

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

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

    $scope.map = new google.maps.Map(document.getElementById("map"), mapOptions);
  //Marcador
  // Esperar que se cargue el mapa
  google.maps.event.addListenerOnce($scope.map, 'idle', function(){
  //Crear marker
  var marker = new google.maps.Marker({
    map: $scope.map,
    animation: google.maps.Animation.DROP,
    position: centro
  });  
  //Ventana 
  var infoWindow = new google.maps.InfoWindow({
    content: "Estás aqui!"
  });
  //Evento de ventana
  google.maps.event.addListener(marker, 'click', function () {
    infoWindow.open($scope.map, marker);
  });
  // Dibujar marker de lugar
  $scope.lat = $state.params.lat;
  $scope.lng = $state.params.lng;
  if ($scope.lat != 0 && $scope.lng != 0) {
    var marker = new google.maps.Marker({
      map: $scope.map,
      animation: google.maps.Animation.DROP,
      position: new google.maps.LatLng($scope.lat, $scope.lng)
    });   
  } 
});
}, function(error){
  console.log("No pudimos localizarte.");
});
});
5
  • No tengo tiempo de probarlo pero, cambia $scope.lat = $state.params.lat por $scope.lat = parseFloat($stateParams.lat) ademas debes injectar $stateParams. Es necesario pues los parámetros son cadenas, no números. Commented el 4 mar. 2016 a las 17:27
  • Agregue el $stateParams y puse el parseFloat, pero sigue haciendo lo mismo que antes, la primera vez aparece perfecto, con los markers en su lugar, el problema esta cuando voy hacia la otra vista y selecciono un lugar, el mapa no aparece
    – Martin
    Commented el 4 mar. 2016 a las 18:19
  • Algún mensaje de error en la consola?
    – Alvaro Montoro
    Commented el 10 mar. 2016 a las 23:56
  • Hola Alvaro, no me aparece ningun error en la consola. Todo parece correcto, todavía no puedo solucionarlo, si queres ver alguna otra parte del codigo o alguna captura de pantalla me avisas. Gracias por tu respuesta
    – Martin
    Commented el 15 mar. 2016 a las 15:43
  • Porque tienes un estado '/mapa/:lat/:lng' con dos parámetros latitud y longitud y no usas esos parámetros despues con $stateParams para poner el maker en el mapa. Estas intentando poner dos markers?
    – devconcept
    Commented el 19 abr. 2016 a las 14:07

1 respuesta 1

1

Recuerda que angular tiene su propio ciclo de vida y los mapas de google funcionan principalmente con eventos por lo que si usas el api nativo vas a tener que estar llamando constantemente a $scope.apply() para sincronizar tu vista con los mapas. Mi recomendación es que uses la librería angular-google-maps que maneja todos esos detalles por tí.

Hacer un mapa con un marker es muy sencillo

lugares.html

<ion-view view-title="Lugares">

<ion-content>
    <ion-list>

        <ion-item class="item-text-wrap" ng-repeat="item in lugares" 
                  ui-sref="tabs.mapa({lat: item.latitud, lng: item.longitud})">
            <h2>{{item.nombre}}</h2>
            <h3>{{item.calle}} {{item.numero}} </h3>
            <h4>{{item.latitud}}, {{item.longitud}}</h4>
        </ion-item>

    </ion-list>
</ion-content>

Fíjate que cambié el href de tus items por ui-sref para manejar los estados. Esto es una buena práctica ya que si modificas la configuración de estos no hay que cambiar código en la vista para que vuelvan a funcionar.

controller

.controller('ControladorMapa', function($scope, $state, $cordovaGeolocation, uiGmapGoogleMapApi) {
  // Mapa con centro en mi posicion
  var options = {timeout: 10000,  enableHighAccuracy: true};

  $cordovaGeolocation.getCurrentPosition(options).then(function(position) {
        uiGmapGoogleMapApi.then(function() {
            $scope.map = {
                center: {
                    latitude: position.coords.latitude,
                    longitude: position.coords.longitude
                },
                zoom: 15           
            };

            $scope.marker = {
                idKey: 1,
                coordinates: {
                    latitude: position.coords.latitude,
                    longitude: position.coords.longitude
                },
                options: {
                    animation: google.maps.Animation.DROP,
                    icon:'url/icon.png'
                },
                click: function () {
                   $scope.showWindow = true;
                }
            };

            $scope.showWindow = false;
        });   

    }, function(error){
        console.log("No pudimos localizarte.");
    });
});

Fíjate que yo llamo a la función uiGmapGoogleMapApi.then(...), la razón de esto es porque tu estas usando una animación(google.maps.Animation.DROP) que es un objeto nativo de los mapas y porque:

Garantiza que angular-google-maps no comienze a procesar ninguna directiva hasta que el SDK de Google Maps esté cargado completamente!

mapa.html

<ui-gmap-google-map center="map.center" zoom="map.zoom">
    <ui-gmap-marker idKey="marker.idKey" click="marker.click"
        coords="marker.coordinates" options="marker.options">
        <ui-gmap-window coords="marker.coordinates" show="showWindow">
            <div>Estás aqui!</div>
        </ui-gmap-window>
    </ui-gmap-marker>
</ui-gmap-google-map>

Si quieres usar el info-window con contenido dinámico tienes que usar la directiva ng-non-bindable ya que angular-google-maps las compila manualmente. Lee una explicación mas detallada en el artículo de SO.

No te olvides configurar la librería en caso que necesites cambiar el comportamiento de todos tus mapas

.config(function(uiGmapGoogleMapApiProvider) {
    uiGmapGoogleMapApiProvider.configure({
        key: 'your api key',
        libraries: 'weather,geometry,visualization'
    });
});    
2
  • Muchísimas gracias, ya lo voy a probar, estoy recién empezando con esto y no sabia que había una API dedicada a Angular.
    – Martin
    Commented el 4 may. 2016 a las 18:17
  • 1
    @Martin No te olvides votar en la respuesta y marcarla como aceptada si te pareció útil.
    – devconcept
    Commented el 12 may. 2016 a las 17:39

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.