Skip to main content
2 de 5
formateo y ortografía.
Alan
  • 2.3k
  • 2
  • 25
  • 37

¿Como dibujar un marker seleccionado de una lista en google maps usando controladores angularjs (Ionic)?

Estoy haciendo una app móvil con Ionic Framework. 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. Intente 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). 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.");
});
});