Hi. I’m building an application where I need to have multiple tabs. The main tab should be the map tab, which currently works. However, I’m having trouble when switching between tabs as every tab but the main map displays as blank. Here is the index.html
<ion-pane>
<ion-tabs class="tabs-icon-top tabs-balanced">
<ion-tab title="Map" icon="ion-map" href="templates/map.html">
<ion-nav-view></ion-nav-view>
</ion-tab>
<ion-tab title="Create" icon="ion-compose" href="templates/create.html">
</ion-tab>
<ion-tab title="User" icon="ion-person" href="templates/user.html">
<ion-nav-view name="user-tab" on-select="userPage()"></ion-nav-view>
</ion-tab>
<ion-tab title="Search" icon="ion-search" href="templates/search.html">
</ion-tab>
</ion-tabs>
</ion-pane>
One thing you might need to add in is the Google Maps API with your own key
<script src="http://maps.google.com/maps/api/js?key=INSERT_KEY_HERE&sensor=true"></script>
Here is the map.html, which is currently the only one that works
<ion-view>
<ion-content>
<div id="map" data-tap-disabled="true"></div>
</ion-content>
</ion-view>
The user.html (what I’m trying to get to display)
<form ng-submit="authenticate(user,pass)">
<div class="credentials">
<label class="item item-input">
<input type="email" placeholder="E-mail">
</label>
<label class="item item-input">
<input type="password" placeholder="Password">
</label>
</div>
<div class="padding">
<button type="submit" class="button button-block button-positive">Submit</button>
</div>
</form>
and finally, the JavaScript
angular.module('sale', ['ionic', 'ngCordova'])
.run(function($ionicPlatform) {
$ionicPlatform.ready(function() {
if(window.cordova && window.cordova.plugins.Keyboard) {
cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
}
if(window.StatusBar) {
StatusBar.styleDefault();
}
});
})
.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('map', {
url: '/',
templateUrl: 'templates/map.html',
controller:'MapCtrl'
});
$urlRouterProvider.otherwise("/");
})
.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);
google.maps.event.addListenerOnce($scope.map, 'idle', function() {
var marker = new google.maps.Marker({
map: $scope.map,
animation: google.maps.Animation.DROP,
position: latLng
});
});
}, function(error) {
console.log("Could not get location");
});
});
If anyone could help at all, that’d be great. Any tips or recommendations regarding my design are welcome as well. I’ve been having a lot of trouble getting a hang of AngularJS as well as Ionic in general so I’m not sure if I’m even using the correct structures.
Thanks!