123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153 |
- <!DOCTYPE html>
- <html ng-app="myApp">
- <head>
- <title>GoogleMap-Based App</title>
- <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
- <script src="https://maps.google.com/maps/api/js?sensor=false"></script>
- <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular.js"></script>
- <!-- build:js scripts/ng-map.min.js -->
- <script src="../app/scripts/app.js"></script>
- <script src="../app/scripts/directives/map_controller.js"></script>
- <script src="../app/scripts/directives/map.js"></script>
- <script src="../app/scripts/directives/marker.js"></script>
- <script src="../app/scripts/directives/shape.js"></script>
- <script src="../app/scripts/services/geo_coder.js"></script>
- <script src="../app/scripts/services/navigator_geolocation.js"></script>
- <script src="../app/scripts/services/street_view.js"></script>
- <script src="../app/scripts/services/attr2_options.js"></script>
- <!-- endbuild -->
- <script src="scripts/markerclusterer.js"></script>
- <script>
- var app = angular.module('myApp', ['ngMap']);
- app.controller('mapController', function($scope, $http, StreetView) {
- $scope.map;
- $scope.stores = [];
- $scope.$on('mapInitialized', function(event, evtMap) {
- map = evtMap;
- $scope.map = map;
- console.log('loading scripts/starbucks.json');
- $http.get('scripts/starbucks.json').success( function(stores) {
- for (var i=0; i<stores.length; i++) {
- var store = stores[i];
- store.position = new google.maps.LatLng(store.latitude,store.longitude);
- store.title = store.name;
- var marker = new google.maps.Marker(store);
- google.maps.event.addListener(marker, 'click', function() {
- $scope.store = this;
- StreetView.getPanorama(map).then(function(panoId) {
- $scope.panoId = panoId;
- });
- map.setZoom(18);
- map.setCenter(this.getPosition());
- $scope.storeInfo.show();
- });
- google.maps.event.addListener(map, 'click', function() {
- $scope.storeInfo.hide();
- });
- $scope.stores.push(marker);
- }
- console.log('finished loading scripts/starbucks.json', '$scope.stores', $scope.stores.length);
- $scope.markerClusterer = new MarkerClusterer(map, $scope.stores, {});
- $scope.fullScreenToggle.click();
- });
- });
- $scope.showStreetView = function() {
- StreetView.setPanorama(map, $scope.panoId);
- $scope.storeInfo.hide();
- };
- $scope.showHybridView = function() {
- map.setMapTypeId(google.maps.MapTypeId.HYBRID);
- map.setTilt(45);
- $scope.storeInfo.hide();
- }
- });
- app.directive('fullScreenToggle', function() {
- return {
- link: function(scope, e, a) {
- this.click = function() {
- e.parent().toggleClass('full-screen');
- e.text( e.parent().hasClass('full-screen') ? 'Exit Full Screen' : 'Full Screen' );
- google.maps.event.trigger(scope.map, 'resize');
- };
- e.on('click', this.click);
- scope.fullScreenToggle = this;
- }
- }
- });
- app.directive('storeInfo', function() {
- var StoreInfo = function(s, e, a) {
- this.scope = s;
- this.element = e;
- this.attrs = a;
- this.show = function() {
- this.element.css('display', 'block');
- this.scope.$apply();
- }
- this.hide = function() {
- this.element.css('display', 'none');
- }
- };
- return {
- templateUrl: 'store-info.html',
- link: function(scope, e, a) {
- scope.storeInfo= new StoreInfo(scope, e, a);
- }
- }
- });
- </script>
- <style>
- html, body {width:100%; height: 100%; margin: 0}
- div#map-container {width: 600px; height: 400px; position: relative; color: rgb(86, 86, 86); font-family: Roboto, Arial, sans-serif; -webkit-user-select: none; font-size: 11px; }
- div#map-container div.custom-control { z-index: 1; direction: ltr; overflow: hidden; text-align: center; padding: 1px 6px; border-bottom-right-radius: 2px; border-top-right-radius: 2px; -webkit-background-clip: padding-box; border-width: 1px 1px 1px 0px; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-top-color: rgba(0, 0, 0, 0.14902); border-right-color: rgba(0, 0, 0, 0.14902); border-bottom-color: rgba(0, 0, 0, 0.14902); -webkit-box-shadow: rgba(0, 0, 0, 0.298039) 0px 1px 4px -1px; box-shadow: rgba(0, 0, 0, 0.298039) 0px 1px 4px -1px; min-width: 41px; background-color: rgb(255, 255, 255); background-clip: padding-box; }
- div#map-container.full-screen {position:absolute; display:block; width:100%; height:100%; top: 0; left: 0}
- div#map-container div[full-screen-toggle] { cursor: pointer; position: absolute; top: 5px; right: 100px; }
- div#map-container div[store-info] { position: absolute; display: none; top: 5px; right: 5px; bottom: 5px; width: 40% }
- div#map-container div[store-info] a.hide-link { float:right }
- div#map-container div[store-info] table { width: 100% }
- div#map-container div[store-info] table td { text-align: left; padding: 5px; border: 1px solid #ccc }
- map {display:block; width:100%; height:100%;}
- </style>
- <script type="text/ng-template" id="store-info.html">
- <a class="hide-link" ng-click="storeInfo.hide()" href="">x</a>
- <h3> {{store.name}} </h3>
- <table>
- <tr>
- <td> Address </td>
- <td> {{store.street_combined}} <br/>
- {{store.city}} {{store.postal_code}} {{store.country}} <br/>
- </td>
- </tr>
- <tr>
- <td> Coordinates </td>
- <td>
- Latitude: {{store.latitude}} <br/>
- Longitude: {{store.longitude}}
- </td>
- </tr>
- </table>
- <a ng-show="panoId" href="" ng-click="showStreetView()">Street View</a>
- <a href="" ng-click="showHybridView()">Satellite View</a>
- </script>
- </head>
- <body>
- <h1>GoogleMap-Based App</h1>
- <hr />
-
- <div id="map-container" ng-controller="mapController">
- <map zoom="2" center="[45.518970, -122.672899]"></map>
- <div full-screen-toggle class="custom-control">Full Screen</div>
- <div store-info class="custom-control">Store Info</div>
- </div>
- </body>
- </html>
|