diff --git a/README.md b/README.md index d9d343df..1259b5ee 100644 --- a/README.md +++ b/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 diff --git a/gmaps.js b/gmaps.js index 1e8deff2..0d7ac65e 100644 --- a/gmaps.js +++ b/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) { diff --git a/test/index.html b/test/index.html index 98a16430..3531b206 100644 --- a/test/index.html +++ b/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; + } @@ -33,6 +48,7 @@ +