javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-11-07 23:16:52 +08:00
Code Issues Packages Projects Releases Wiki Activity

Maps demo

Browse Source
This commit is contained in:
Max Lynch
2013-10-21 11:57:48 -05:00
parent b5de0fdbd7
commit ce5d3e6fde
1 changed files with 72 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

72
starters/map/index.html Normal file
View File

@ -0,0 +1,72 @@
<html ng-app="ionic.example">
<head>
<meta charset="utf-8">
<title>Map</title>
<!-- Sets initial viewport load and disables zooming -->
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
<link rel="stylesheet" href="/dist/css/ionic.css">
<style>
#map {
width: 100%;
height: 100%;
}
</style>
<script src="/vendor/angular/angular-1.2.0rc2.min.js"></script>
<script src="/vendor/angular/angular-touch.js"></script>
<script src="/vendor/angular/angular-animate.js"></script>
<script src="/dist/js/ionic.js"></script>
<script src="/dist/js/ionic-angular.js"></script>
<script type="text/javascript"
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB16sGmIekuGIvYOfNoW9T44377IU2d2Es&sensor=true"></script>
<script type="text/javascript">
</script>
</head>
<body ng-controller="MapCtrl">
<div class="bar bar-header bar-dark">
<h1 class="title">Map</h1>
</div>
<content has-header="true">
<div id="map"></div>
</content>
<div class="bar bar-footer bar-dark">
<button ng-click="centerOnMe()" class="button button-icon"><i class="icon-ios7-navigate"></i></button>
</div>
</body>
<script>
angular.module('ionic.example', ['ionic.ui.content', 'ionic.ui.list', 'ionic.service.loading'])
.controller('MapCtrl', function($scope, Loading) {
function initialize() {
var mapOptions = {
center: new google.maps.LatLng(43.07493,-89.381388),
zoom: 16,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map"),
mapOptions);
$scope.map = map;
}
google.maps.event.addDomListener(window, 'load', initialize);
$scope.centerOnMe = function() {
if(!$scope.map) {
return;
}
var loading = Loading.show({
content: 'Getting current location...',
showBackdrop: false
});
navigator.geolocation.getCurrentPosition(function(pos) {
$scope.map.setCenter(new google.maps.LatLng(pos.coords.latitude, pos.coords.longitude));
loading.hide();
}, function(error) {
alert('Unable to get location');
});
};
});
</script>
</html>