seimin
/
itsm-pc-handle


			
				
					
						
						
							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>