I am running (currently) a static list and redirect to a detail view. The problem is that I need in each view, a map is displayed. Just pass me the first time I open a detail and loads the map, the other times not charge maps, no errors or messages. Maybe this doing something wrong but I can not identify the problem. I leave my code
<script id="misviews.html" type="text/ng-template">
<ion-view>
<ion-nav-title>
<img src="img/icono_view.png" style="width: 40px;height: 40px;">
</ion-nav-title>
<ion-nav-buttons side="left">
<button menu-toggle="left" class="button button-icon icon ion-navicon" style="color: #FFF;"></button>
</ion-nav-buttons>
<ion-tabs class="tabs-background-positive tabs-color-stable tabs-top tabs-striped" style="margin-bottom:20px;">
<ion-tab title="Lista" style="font-weight: bold;">
<ion-content lazy-scroll>
<ion-refresher on-refresh="doRefresh()"></ion-refresher>
<ion-list>
<a class="item item-avatar" ng-repeat="item in items" ng-click="verView({{$index}})">
<img image-lazy-src="img/icon_user.png">
<h2>{{item}}</h2>
<p>Back off, man. Im a scientist.</p>
<i class="icon ion-chevron-right" id="ver_view"></i>
</a>
</ion-list>
<div style="height:50px;"></div>
</ion-content>
</ion-tab>
<ion-tab title="Mapa" style="font-weight: bold;">
<ion-content >
</ion-content>
</ion-tab>
</ion-tabs>
<ion-refresher on-refresh="doRefresh()"></ion-refresher>
</ion-content>
</ion-view>
</script>
Controller
.controller('MisViewsCtrl', function($scope,$ionicNavBarDelegate,$timeout,$location,$ionicPlatform,$ionicLoading, $compile){
$scope.items = ['Item 1', 'Item 2', 'Item 3'];
$scope.doRefresh = function() {
console.log('Refreshing!');
$timeout( function() {
//simulate async response
$scope.items.unshift('Item ' + Math.floor(Math.random() * 1000) + 4);
//Stop the ion-refresher from spinning
$scope.$broadcast('scroll.refreshComplete');
}, 1000);
};
$scope.verView = function(index){
$location.path("/event/view/"+index);
}
})
View
<script id="view.html" type="text/ng-template">
<ion-view>
<ion-nav-title>
<img src="img/icono_view.png" style="width: 40px;height: 40px;">
</ion-nav-title>
<ion-nav-back-button class="button-clear">
<i class="ion-arrow-left-c" style="color:#FFF"></i> Volver
</ion-nav-back-button>
<ion-content style="margin-top:25px;" lazy-scroll start-y="120" data-ng-init="cargarUbicacion()">
<img image-lazy-src="img/cable-cortado.jpg" style="width:100%;height: 140px;">
<div id="mapa" style="width:100%;height: 140px;"></div>
</ion-content>
</ion-view>
</script>
Controller
.controller('ViewCtrl', ['$scope', '$rootScope', '$location', '$stateParams','$ionicFrostedDelegate','$ionicScrollDelegate', function($scope, $rootScope, $location, $stateParams,$ionicFrostedDelegate, $ionicScrollDelegate) {
$scope.cargarUbicacion = function () {
alert("fff");
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function (position) {
latitud_actual = position.coords.latitude;
longitud_actual = position.coords.longitude;
console.log(latitud_actual);
console.log(longitud_actual);
var mapOptions = {
center: new google.maps.LatLng(latitud_actual, longitud_actual),
zoom: 15,
mapTypeId: google.maps.MapTypeId.ROADMAP,
scrollwheel: false
};
map = new google.maps.Map(document.getElementById("mapa"), mapOptions);
$scope.setMarker(map, new google.maps.LatLng(latitud_actual, longitud_actual), 'Yo', '');
});
}
}
$scope.setMarker = function(map, position, title, content) {
var marker;
var markerOptions = {
position: position,
map: map,
title: title,
icon: 'http://maps.google.com/mapfiles/ms/icons/green-dot.png'
};
marker = new google.maps.Marker(markerOptions);
markers.push(marker); // add marker to array
google.maps.event.addListener(marker, 'click', function () {
// close window if not undefined
if (infoWindow !== void 0) {
infoWindow.close();
}
// create new window
var infoWindowOptions = {
content: content
};
infoWindow = new google.maps.InfoWindow(infoWindowOptions);
infoWindow.open(map, marker);
});
}
}])