I'm doing a mobile app with Ionic Framework and I have a list of places in a lugares.html view, each item has a name, address and location (coordinates). I want that when selecting an item the marker of my current and selected position is drawn. I tried to do it with a href by passing the coordinates by parameters to the map view, but it only works the first time and then the map does not appear. My doubt is in the part of "// Draw marker of place", I do not know if to put it in a function, how to call it .. I am new in this. If they need any other part of the code, they let me know. (I clarify that I am using tabs and the map is a tab and places is another). I would also like to know if I am doing it in the correct way (using the href ). I appreciate your help.
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>
Map status
.state('tabs.mapa',{
url:'/mapa/:lat/:lng',
views:{
'mapa-tab':{
templateUrl: 'templates/mapa.html',
controller: 'ControladorMapa'
}
}
})
Map controller
.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.");
});
});