Maps demo

2025-11-07 15:07:13 +08:00 · 2013-10-21 11:57:48 -05:00
parent b5de0fdbd7
commit ce5d3e6fde
1 changed files with 72 additions and 0 deletions
--- a/starters/map/index.html
+++ b/starters/map/index.html
@ -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>