source : street-view-panorama.js 

  1. /**
  2.  * @ngdoc directive
  3.  * @name streetview-panorama
  4.  * @param Attr2MapOptions {service} convert html attribute to Google map api options
  5.  * @description
  6.  *   Requires:  map directive
  7.  *   Restrict To:  Element
  8.  *
  9.  * @attr container Optional, id or css selector, if given, streetview will be in the given html element
  10.  * @attr {String} <StreetViewPanoramaOption>
  11.  *   [Any Google StreetViewPanorama options](https://developers.google.com/maps/documentation/javascript/reference?csw=1#StreetViewPanoramaOptions)
  12.  * @attr {String} <StreetViewPanoramaEvent>
  13.  *   [Any Google StreetViewPanorama events](https://developers.google.com/maps/documentation/javascript/reference#StreetViewPanorama)
  14.  *
  15.  * @example
  16.  *   <map zoom="11" center="[40.688738,-74.043871]" >
  17.  *     <street-view-panorama
  18.  *       click-to-go="true"
  19.  *       disable-default-ui="true"
  20.  *       disable-double-click-zoom="true"
  21.  *       enable-close-button="true"
  22.  *       pano="my-pano"
  23.  *       position="40.688738,-74.043871"
  24.  *       pov="{heading:0, pitch: 90}"
  25.  *       scrollwheel="false"
  26.  *       visible="true">
  27.  *     </street-view-panorama>
  28.  *   </map>
  29.  */
  30. /* global google, document */
  31. (function() {
  32.   'use strict';
  33.   var streetViewPanorama = function(Attr2MapOptions, NgMap) {
  34.     var parser = Attr2MapOptions;
  35.     var getStreetViewPanorama = function(map, options, events) {
  36.       var svp, container;
  37.       if (options.container) {
  38.         container = document.getElementById(options.container);
  39.         container = container || document.querySelector(options.container);
  40.       }
  41.       if (container) {
  42.         svp = new google.maps.StreetViewPanorama(container, options);
  43.       } else {
  44.         svp = map.getStreetView();
  45.         svp.setOptions(options);
  46.       }
  47.       for (var eventName in events) {
  48.         eventName &&
  49.           google.maps.event.addListener(svp, eventName, events[eventName]);
  50.       }
  51.       return svp;
  52.     };
  53.     var linkFunc = function(scope, element, attrs) {
  54.       var filtered = parser.filter(attrs);
  55.       var options = parser.getOptions(filtered, {scope: scope});
  56.       var controlOptions = parser.getControlOptions(filtered);
  57.       var svpOptions = angular.extend(options, controlOptions);
  58.       var svpEvents = parser.getEvents(scope, filtered);
  59.       console.log('street-view-panorama',
  60.         'options', svpOptions, 'events', svpEvents);
  61.       NgMap.getMap().then(function(map) {
  62.         var svp = getStreetViewPanorama(map, svpOptions, svpEvents);
  63.         map.setStreetView(svp);
  64.         (!svp.getPosition()) && svp.setPosition(map.getCenter());
  65.         google.maps.event.addListener(svp, 'position_changed', function() {
  66.           if (svp.getPosition() !== map.getCenter()) {
  67.             map.setCenter(svp.getPosition());
  68.           }
  69.         });
  70.         //needed for geo-callback
  71.         var listener =
  72.           google.maps.event.addListener(map, 'center_changed', function() {
  73.             svp.setPosition(map.getCenter());
  74.             google.maps.event.removeListener(listener);
  75.           });
  76.       });
  77.     }; //link
  78.     return {
  79.       restrict: 'E',
  80.       require: ['?^map','?^ngMap'],
  81.       link: linkFunc
  82.     };
  83.   };
  84.   streetViewPanorama.$inject = ['Attr2MapOptions', 'NgMap'];
  85.   angular.module('ngMap').directive('streetViewPanorama', streetViewPanorama);
  86. })();