Ionic Framework starter tabs app demo + Google Maps Info Box

<!DOCTYPE html>
<html>

  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width" />
    <title></title>

    <!-- Links (anchor tags) inside Google Maps InfoBox only work with version "1.0.0-beta.1". From version "1.0.0-beta.2" they don't work, nothing happens when clicking. -->
    <link rel="stylesheet" href="http://code.ionicframework.com/1.0.0-beta.1/css/ionic.min.css">
    <script src="http://code.ionicframework.com/1.0.0-beta.1/js/ionic.bundle.min.js"></script>
 
    <link rel="stylesheet" href="style.css" />
    
    <script src="http://maps.google.com/maps/api/js?sensor=false"></script>
    <script src="http://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobox/src/infobox.js"></script>

    <script src="app.js"></script>
    <script src="controllers.js"></script>

    <!-- cordova script (this will be a 404 during development) -->
    <script src="cordova.js"></script>
  </head>

  <body ng-app="starter" animation="slide-left-right-ios7">
    <!-- 
      The nav bar that will be updated as we navigate between views.
    -->
    <ion-nav-bar class="bar-stable nav-title-slide-ios7">
      <ion-nav-back-button class="button-icon icon ion-chevron-left">
        Back
      </ion-nav-back-button>
    </ion-nav-bar>
    <!-- 
      The views will be rendered in the <ion-nav-view> directive below
      Templates are in the /templates folder (but you could also
      have templates inline in this html file if you'd like).
    -->
    <ion-nav-view></ion-nav-view>
  </body>

</html>

.scroll { height: 100%; }
.map-container,
.google-map { height: 100%; }
#map-canvas { width: 100%; height: 100%; }

#infobox {
    border:0 solid black;
    margin-top: 8px;
    background: #000;
    color:#fff;
    font-family: Helvetica;
    padding: 1em 1em;
    box-shadow: 5px 5px 5px 0px rgba(0,0,0,0.4);
}
#infobox p { margin: 0; }
#infobox .titulo { font-size: 15px; line-height: 1.25em; margin-bottom: 5px; }
#infobox .endereco { font-size: 12px; line-height: 1.25em; margin-bottom: 15px; }
#infobox a {
    cursor: pointer;
    background-color: #33AAFF;
    text-decoration: none;
    padding: 5px 0 2px;
    color: #eee;
    text-align: center;
    display: block;
    margin: 5px auto 0;
    text-transform: uppercase;
}
#infobox a:hover {
    background-color: #40B7FF;
}

angular.module('starter', ['ionic', 'starter.controllers'])

.run(function($ionicPlatform) {
  $ionicPlatform.ready(function() {
    StatusBar.styleDefault();
  });
})

.config(function($stateProvider, $urlRouterProvider) {

  $stateProvider

    // setup an abstract state for the tabs directive
    .state('tab', {
      url: "/tab",
      abstract: true,
      templateUrl: "tabs.html"
    })

    // Each tab has its own nav history stack:

    .state('tab.map', {
      url: '/map',
      views: {
        'tab-map': {
          templateUrl: 'tab-map.html',
          controller: 'MapCtrl'
        }
      }
    })

    .state('tab.about', {
      url: '/about',
      views: {
        'tab-about': {
          templateUrl: 'tab-about.html',
          controller: 'AboutCtrl'
        }
      }
    })

  // if none of the above states are matched, use this as the fallback
  $urlRouterProvider.otherwise('/tab/map');

});

Based on 
https://github.com/driftyco/ionic-starter-tabs

angular.module('starter.controllers', [])

.controller('MapCtrl', function($scope) {
  
  $scope.locations = [
    { ID: 08, Name: 'Koxixos', Address: 'Av. Gov Irineu Bornhausen, 3933', Latitude: '-27.573228', Longitude: '-48.539657' }
  ];

  $scope.latlng = new google.maps.LatLng($scope.locations[0].Latitude, $scope.locations[0].Longitude);
  
  $scope.map = new google.maps.Map(document.getElementById("map-canvas"), {
    zoom: 11,
    center: $scope.latlng,
    scrollwheel: false,
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    mapTypeControl: false,
    zoomControl: true,
    zoomControlOptions: {
      style: google.maps.ZoomControlStyle.SMALL
    },        
  });
  
  $scope.infoBoxContent =
'<div id="infobox">'+
  '<p class="titulo">' + $scope.locations[0].Name + '</p>'+
  '<p class="Address"> ' + $scope.locations[0].Address + '</p>'+
  '<p><a href="http://maps.google.com?ll=' + $scope.locations[0].Latitude + ',' + $scope.locations[0].Longitude + '&amp;q=' + $scope.locations[0].Address  + '" target="_blank">Open in Google Maps</a></p>'+
'</div>';

  $scope.marker = new google.maps.Marker({
    position: $scope.latlng,
    map: $scope.map,
    visible: true,
    infoBoxContent: $scope.infoBoxContent
  });
  
  $scope.infoBox = new InfoBox({
    disableAutoPan: true,
    maxWidth: 150,
    pixelOffset: new google.maps.Size(-140, 0),
    zIndex: null,
    boxStyle: {
        background: "url('http://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobox/examples/tipbox.gif') no-repeat",
        opacity: 1,
        width: "280px"
    },
    closeBoxMargin: "18px 10px",
    closeBoxURL: "http://www.google.com/intl/en_us/mapfiles/close.gif",
    infoBoxClearance: new google.maps.Size(1, 1)
  });
  
  google.maps.event.addListener($scope.marker, 'click', function() {
    $scope.infoBox.setContent(this.infoBoxContent);
    $scope.infoBox.open($scope.map, this);
  });
  
})

.controller('AboutCtrl', function($scope) {
});

<ion-tabs class="tabs-icon-top">


  <!-- Map Tab -->
  <ion-tab title="Map" icon="icon ion-map" href="#/tab/map">
    <ion-nav-view name="tab-map"></ion-nav-view>
  </ion-tab>


  <!-- About Tab -->
  <ion-tab title="About" icon="icon ion-help" href="#/tab/about">
    <ion-nav-view name="tab-about"></ion-nav-view>
  </ion-tab>


</ion-tabs>

<ion-view title="About">
  <ion-content class="has-header padding">
    <h1>About</h1>
  </ion-content>
</ion-view>

<ion-view title="Map">
  <ion-content class="has-header">
    <div class="map-container">
    	<div id="map-canvas"></div>
    </div>
    oi
  </ion-content>
</ion-view>