Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse files

New feature: StreetView Panoramas

  • Loading branch information...
commit 59a8fe1f680556b5d6e04268b0aca66692a8509c 1 parent 82bdb8d
@hpneo authored
View
4 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
View
54 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) {
View
27 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 @@
<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>
View
84 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();
+ });
+ });
+});
Please sign in to comment.
Something went wrong with that request. Please try again.