leuowang/app.js

## app.js
var map = null;
angular.module('starter', ['ionic', 'starter.services'])
        .config(function ($stateProvider, $urlRouterProvider) {
            $stateProvider
                    .state('list', {
                        url: '/list',
                        templateUrl: 'templates/list.html',
                        controller: 'listCtrl'
                    })
                    .state('detail', {
                        url: '/list/:id',
                        templateUrl: 'templates/detail.html',
                        controller: 'detailCtrl'
                    })
            $urlRouterProvider.otherwise('/list')
        })
        .controller('listCtrl', function ($scope, POIs, $location) {
            $scope.pois = POIs;
            $scope.detail = function (id) {
                $location.path('/list/' + id);
            }
        })
        .controller('detailCtrl', function ($scope, MAP, $stateParams, POIs, $filter) {
            $scope.poi = $filter('filter')(POIs, {number: $stateParams.id})[0];
            map = MAP.initialize('map');  // 載入地圖 'map'是顯示地圖區塊的id
            var marker = {lat: ($scope.poi.latlng)[0], lng: ($scope.poi.latlng)[1], title: $scope.poi.name};
            MAP.setLocation(map, marker);

        })
        .run(function ($ionicPlatform) {
            $ionicPlatform.ready(function () {
                if (window.cordova && window.cordova.plugins.Keyboard) {
                    cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
                }
                if (window.StatusBar) {
                    StatusBar.styleDefault();
                }
            });
        })


## detail.html
<ion-view title="{{poi.name}}">
    <ion-content>
        <div class="card list">
            <div class="item item-avatar-left">
                <img src="img/ionic.png">
                <h2>{{poi.name}}</h2>
                <p class="row">
                    <span class="col-20">地點</span><span class="col-80">{{poi.entrance}}</span>
                </p>
                <p class="row">
                    <span class="col-20">等級</span><span class="col-80">{{poi.level}}</span>
                </p>
                <p class="row">
                    <span class="col-20">系統</span><span class="col-80">{{poi.system}}</span>
                </p>
            </div>
            <div class="item item-body">
                <div class="row">
                    <div class="col col-center">
                        <div style="width:250px;height:250px;" id="map" data-tap-disabled="true"></div>
                    </div>
                </div>
            </div>
        </div>
    </ion-content>
</ion-view>

## index.html
<!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>

        <link href="lib/ionic/css/ionic.css" rel="stylesheet">
        <link href="css/style.css" rel="stylesheet">

        <!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above
        <link href="css/ionic.app.css" rel="stylesheet">
        -->

        <!-- ionic/angularjs js -->
        <script src="lib/ionic/js/ionic.bundle.js"></script>

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

        <!-- your app's js -->
        <script src="js/app.js"></script>
        <script src="js/services.js"></script>
        <script src="http://maps.googleapis.com/maps/api/js?key=[Your_API_KEY]&sensor=true"></script>
    </head>
    <body ng-app="starter">
    <ion-nav-bar class="bar-positive">
        <ion-nav-back-button></ion-nav-back-button>
    </ion-nav-bar>
    <ion-nav-view>
    </ion-nav-view>

</body>
</html>

## list.html
<ion-view title="步道系統">
    <ion-content>
        <ion-list ng-repeat="item in pois">
            <ion-item ng-click="detail({{item.number}})">
                {{item.name}}
            </ion-item>
        </ion-list>
    </ion-content>
</ion-view>

## services.js
angular.module('starter.services', [])
        .factory('MAP', function () {
            var self = this;
            self.initialize = function (id) {
                var LatLng = navigator.geolocation.getCurrentPosition(function (pos) {
                    return new google.maps.LatLng(pos.coords.latitude,
                            pos.coords.longitude)
                }) // 目前位置
                var mapOptions = {
                    center: LatLng,
                    zoom: 15,
                    mapTypeId: google.maps.MapTypeId.ROADMAP
                };
                var map = new google.maps.Map(document.getElementById(id), mapOptions);
                return map;
            }

            self.setLocation = function (map, pos) {
                var marker = new google.maps.Marker({
                    position: new google.maps.LatLng(pos.lat, pos.lng),
                    map: map,
                    title: pos.title
                });
                map.setCenter(marker.getPosition());
                return map;
            }
            return self
        })
        .value('POIs', [{
                "entrance": "宜蘭縣南澳鄉",
                "level": "國家級步道",
                "manager": "羅東林區管理處",
                "name": "蘇花古道：大南澳越嶺段",
                "number": "1",
                "second_system": "無",
                "system": "蘇花-比亞毫國家步道系統",
                "latlng": [24.26467, 121.740875]
            }, {
                "entrance": "宜蘭縣南澳鄉",
                "level": "國家級步道",
                "manager": "羅東林區管理處",
                "name": "南澳古道",
                "number": "2",
                "second_system": "無",
                "system": "蘇花-比亞毫國家步道系統",
                "latlng": [24.423027, 121.705242]
            }, {
                "entrance": "新北市新店區",
                "level": "區域級步道",
                "manager": "羅東林區管理處",
                "name": "新店獅頭山步道",
                "number": "3",
                "second_system": "石碇山群子區域步道系統",
                "system": "基隆-東北角海岸區域步道系統",
                "latlng": [24.956111, 121.548427]
            }, {
                "entrance": "新北市坪林區",
                "level": "區域級步道",
                "manager": "羅東林區管理處",
                "name": "金瓜寮魚蕨步道",
                "number": "4",
                "second_system": "烏來子區域步道系統",
                "system": "北桃山域步道系統",
                "latlng": [24.903422, 121.674463]
            }]);

## style.css
.scroll {
    height: 100%;
}
#map {
    width: 100%;
    height: 100%;
}
	var map = null;
	angular.module('starter', ['ionic', 'starter.services'])
	.config(function ($stateProvider, $urlRouterProvider) {
	$stateProvider
	.state('list', {
	url: '/list',
	templateUrl: 'templates/list.html',
	controller: 'listCtrl'
	})
	.state('detail', {
	url: '/list/:id',
	templateUrl: 'templates/detail.html',
	controller: 'detailCtrl'
	})
	$urlRouterProvider.otherwise('/list')
	})
	.controller('listCtrl', function ($scope, POIs, $location) {
	$scope.pois = POIs;
	$scope.detail = function (id) {
	$location.path('/list/' + id);
	}
	})
	.controller('detailCtrl', function ($scope, MAP, $stateParams, POIs, $filter) {
	$scope.poi = $filter('filter')(POIs, {number: $stateParams.id})[0];
	map = MAP.initialize('map'); // 載入地圖 'map'是顯示地圖區塊的id
	var marker = {lat: ($scope.poi.latlng)[0], lng: ($scope.poi.latlng)[1], title: $scope.poi.name};
	MAP.setLocation(map, marker);

	})
	.run(function ($ionicPlatform) {
	$ionicPlatform.ready(function () {
	if (window.cordova && window.cordova.plugins.Keyboard) {
	cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
	}
	if (window.StatusBar) {
	StatusBar.styleDefault();
	}
	});
	})
	<ion-view title="{{poi.name}}">
	<ion-content>
	<div class="card list">
	<div class="item item-avatar-left">
	<img src="img/ionic.png">
	<h2>{{poi.name}}</h2>
	<p class="row">
	<span class="col-20">地點</span><span class="col-80">{{poi.entrance}}</span>
	</p>
	<p class="row">
	<span class="col-20">等級</span><span class="col-80">{{poi.level}}</span>
	</p>
	<p class="row">
	<span class="col-20">系統</span><span class="col-80">{{poi.system}}</span>
	</p>
	</div>
	<div class="item item-body">
	<div class="row">
	<div class="col col-center">
	<div style="width:250px;height:250px;" id="map" data-tap-disabled="true"></div>
	</div>
	</div>
	</div>
	</div>
	</ion-content>
	</ion-view>
	<!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>

	<link href="lib/ionic/css/ionic.css" rel="stylesheet">
	<link href="css/style.css" rel="stylesheet">

	<!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above
	<link href="css/ionic.app.css" rel="stylesheet">
	-->

	<!-- ionic/angularjs js -->
	<script src="lib/ionic/js/ionic.bundle.js"></script>

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

	<!-- your app's js -->
	<script src="js/app.js"></script>
	<script src="js/services.js"></script>
	<script src="http://maps.googleapis.com/maps/api/js?key=[Your_API_KEY]&sensor=true"></script>
	</head>
	<body ng-app="starter">
	<ion-nav-bar class="bar-positive">
	<ion-nav-back-button></ion-nav-back-button>
	</ion-nav-bar>
	<ion-nav-view>
	</ion-nav-view>

	</body>
	</html>
	<ion-view title="步道系統">
	<ion-content>
	<ion-list ng-repeat="item in pois">
	<ion-item ng-click="detail({{item.number}})">
	{{item.name}}
	</ion-item>
	</ion-list>
	</ion-content>
	</ion-view>
	angular.module('starter.services', [])
	.factory('MAP', function () {
	var self = this;
	self.initialize = function (id) {
	var LatLng = navigator.geolocation.getCurrentPosition(function (pos) {
	return new google.maps.LatLng(pos.coords.latitude,
	pos.coords.longitude)
	}) // 目前位置
	var mapOptions = {
	center: LatLng,
	zoom: 15,
	mapTypeId: google.maps.MapTypeId.ROADMAP
	};
	var map = new google.maps.Map(document.getElementById(id), mapOptions);
	return map;
	}

	self.setLocation = function (map, pos) {
	var marker = new google.maps.Marker({
	position: new google.maps.LatLng(pos.lat, pos.lng),
	map: map,
	title: pos.title
	});
	map.setCenter(marker.getPosition());
	return map;
	}
	return self
	})
	.value('POIs', [{
	"entrance": "宜蘭縣南澳鄉",
	"level": "國家級步道",
	"manager": "羅東林區管理處",
	"name": "蘇花古道：大南澳越嶺段",
	"number": "1",
	"second_system": "無",
	"system": "蘇花-比亞毫國家步道系統",
	"latlng": [24.26467, 121.740875]
	}, {
	"entrance": "宜蘭縣南澳鄉",
	"level": "國家級步道",
	"manager": "羅東林區管理處",
	"name": "南澳古道",
	"number": "2",
	"second_system": "無",
	"system": "蘇花-比亞毫國家步道系統",
	"latlng": [24.423027, 121.705242]
	}, {
	"entrance": "新北市新店區",
	"level": "區域級步道",
	"manager": "羅東林區管理處",
	"name": "新店獅頭山步道",
	"number": "3",
	"second_system": "石碇山群子區域步道系統",
	"system": "基隆-東北角海岸區域步道系統",
	"latlng": [24.956111, 121.548427]
	}, {
	"entrance": "新北市坪林區",
	"level": "區域級步道",
	"manager": "羅東林區管理處",
	"name": "金瓜寮魚蕨步道",
	"number": "4",
	"second_system": "烏來子區域步道系統",
	"system": "北桃山域步道系統",
	"latlng": [24.903422, 121.674463]
	}]);