New feature: StreetView Panoramas

README.md

@@ -8,6 +8,10 @@ Visit the examples in [hpneo.github.com/gmaps](http://hpneo.github.com/gmaps/)
 Changelog
 ---------
 
+0.2.30
+-----------------------
+* New feature: StreetView Panoramas
+
 0.2.29
 -----------------------
 * New methods: removePolyline and removePolygon

gmaps.js

@@ -1,5 +1,5 @@
 /*!
- * GMaps.js v0.2.29
+ * GMaps.js v0.2.30
  * http://hpneo.github.com/gmaps/
  *
  * Copyright 2012, Gustavo Leon
@@ -1340,15 +1340,63 @@ if(window.google && window.google.maps){
 
       // Styles
 
-      this.addStyle = function(options){       
+      this.addStyle = function(options) {       
         var styledMapType = new google.maps.StyledMapType(options.styles, options.styledMapName);
 
         this.map.mapTypes.set(options.mapTypeId, styledMapType);
       };
 
-      this.setStyle = function(mapTypeId){     
+      this.setStyle = function(mapTypeId) {     
         this.map.setMapTypeId(mapTypeId);
       };
+
+      // StreetView
+
+      this.createPanorama = function(streetview_options) {
+        if (!streetview_options.hasOwnProperty('lat') || !streetview_options.hasOwnProperty('lng')) {
+          streetview_options.lat = this.getCenter().lat();
+          streetview_options.lng = this.getCenter().lng();
+        }
+
+        this.panorama = GMaps.createPanorama(streetview_options);
+
+        this.map.setStreetView(this.panorama);
+
+        return this.panorama;
+      };
+    };
+
+    GMaps.createPanorama = function(options) {
+      var el = getElementById(options.el, options.context);
+
+      options.position = new google.maps.LatLng(options.lat, options.lng);
+
+      delete options.el;
+      delete options.context;
+      delete options.lat;
+      delete options.lng;
+
+      var streetview_events = ['closeclick', 'links_changed', 'pano_changed', 'position_changed', 'pov_changed', 'resize', 'visible_changed'];
+
+      var streetview_options = extend_object({visible : true}, options);
+
+      for(var i = 0; i < streetview_events.length; i++) {
+        delete streetview_options[streetview_events[i]];
+      }
+
+      var panorama = new google.maps.StreetViewPanorama(el, streetview_options);
+
+      for(var i = 0; i < streetview_events.length; i++) {
+        (function(object, name) {
+          google.maps.event.addListener(object, name, function(){
+            if (options[name]) {
+              options[name].apply(this);
+            }
+          });
+        })(panorama, streetview_events[i]);
+      }
+
+      return panorama;
     };
 
     GMaps.Route = function(options) {

test/index.html

@@ -15,10 +15,25 @@
       font-variant: small-caps;
     }
 
-    .map {
+    .map,
+    .panorama {
       width: 100%;
       height: 100px;
     }
+
+    .with-columns {
+      display: block;
+      width: 100%;
+      overflow: hidden;
+    }
+
+    .with-columns .map,
+    .with-columns .panorama {
+      display: block;
+      width: 50%;
+      height: 150px;
+      float: left;
+    }
   </style>
   <script type="text/javascript" src="lib/jasmine.js"></script>
   <script type="text/javascript" src="lib/jasmine-html.js"></script>
@@ -33,6 +48,7 @@
   <script type="text/javascript" src="spec/OverlaySpec.js"></script>
   <script type="text/javascript" src="spec/RouteSpec.js"></script>
   <script type="text/javascript" src="spec/StyleSpec.js"></script>
+  <script type="text/javascript" src="spec/StreetViewSpec.js"></script>
 
   <script type="text/javascript">
     (function() {
@@ -85,5 +101,14 @@ <h3>Map with routes</h3>
   <div class="map" id="map-with-routes"></div>
   <h3>Map with styles</h3>
   <div class="map" id="map-with-styles"></div>
+  <h3>Street View Panorama</h3>
+  <div class="panorama" id="streetview-standalone-panorama"></div>
+  <h3>Map with Street View</h3>
+  <div class="with-columns">
+    <div class="map" id="map-with-streetview"></div>
+    <div class="panorama" id="streetview-panorama"></div>
+  </div>
+  <h3>Street View Panorama with events</h3>
+  <div class="panorama" id="streetview-with-events"></div>
 </body>
 </html>

test/spec/StreetViewSpec.js

@@ -0,0 +1,84 @@
+describe("Create a Street View Panorama", function() {
+  var map_with_streetview, attached_panorama, standalone_panorama, panorama_with_events;
+
+  beforeEach(function() {
+    map_with_streetview = map_with_streetview || new GMaps({
+      el : '#map-with-streetview',
+      lat : 42.3455,
+      lng : -71.0983,
+      zoom : 12
+    });
+  });
+
+  describe("Standalone", function() {
+    beforeEach(function() {
+      standalone_panorama = standalone_panorama || GMaps.createPanorama({
+        el : '#streetview-standalone-panorama',
+        lat : 42.3455,
+        lng : -71.0983,
+        pov : {
+          heading : 60,
+          pitch : -10,
+          zoom : 1
+        }
+      });
+    });
+
+    it("should create a Street View panorama", function() {
+      expect(standalone_panorama).toBeDefined();
+    });
+  });
+
+  describe("Attached to the current map", function() {
+    beforeEach(function() {
+      attached_panorama = attached_panorama || map_with_streetview.createPanorama({
+        el : '#streetview-panorama',
+        pov : {
+          heading : 60,
+          pitch : -10,
+          zoom : 1
+        }
+      });
+    });
+
+    it("should be equal to the current map Street View panorama", function() {
+      expect(map_with_streetview.getStreetView()).toEqual(attached_panorama);
+    });
+  });
+
+  describe("With events", function() {
+    var callbacks;
+
+    beforeEach(function() {
+      callbacks = {
+        onpovchanged : function() {
+          console.log(this);
+        }
+      };
+
+      spyOn(callbacks, 'onpovchanged').andCallThrough();
+
+      panorama_with_events = panorama_with_events || GMaps.createPanorama({
+        el : '#streetview-with-events',
+        lat : 42.3455,
+        lng : -71.0983,
+        pov : {
+          heading : 60,
+          pitch : -10,
+          zoom : 1
+        },
+        pov_changed : callbacks.onpovchanged
+      });
+    });
+
+    it("should respond to pov_changed event", function() {
+      panorama_with_events.setPov({
+        heading : 80,
+        pitch : -10,
+        zoom : 1
+      });
+
+      expect(callbacks.onpovchanged).toHaveBeenCalled();
+    });
+  });
+});