Skip to content
This repository

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse code

[locations] Implementing basic places search and adding a new default…

… location
  • Loading branch information...
commit 80ff4a1fc19a4c92cdcd35d8c126853ed1b4d554 1 parent f7d4ceb
Alex Hancock authored
3  css/main.css
@@ -24,6 +24,9 @@ body {
24 24 top: 20px;
25 25 right: 20px;
26 26 }
  27 +#searchInput {
  28 + width: 250px;
  29 +}
27 30 #headtrackerMessageDiv {
28 31 top: 200px !important;
29 32 font-weight: bold !important;
3  index.html
@@ -18,11 +18,12 @@
18 18 </form>
19 19
20 20 <div data-role="footer">
21   - <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyD6mQAr_Xiwh7Z8CWOsSu6DvKeGPjq1_9c&sensor=true"></script>
  21 + <script src="https://maps.googleapis.com/maps/api/js?libraries=places&key=AIzaSyD6mQAr_Xiwh7Z8CWOsSu6DvKeGPjq1_9c&sensor=true"></script>
22 22 <script src="deps/jquery.min.js"></script>
23 23 <script src="deps/underscore-min.js"></script>
24 24 <script src="deps/backbone-min.js"></script>
25 25 <script src="deps/headtrackr.js"></script>
  26 + <script src="js/views/search.js"></script>
26 27 <script src="js/views/main.js"></script>
27 28 <script src="js/base.js"></script>
28 29 </div>
2  js/base.js
@@ -4,5 +4,5 @@
4 4 });
5 5
6 6 $(window).on('load', function(e){
7   - mainView.render();
  7 + mainView.render(false, true);
8 8 });
71 js/views/main.js
... ... @@ -1,45 +1,60 @@
1 1 var Street_Facing_View = Backbone.View.extend({
2   - render: function() {
  2 +
  3 + initialize:function(){
3 4 _.bindAll(this);
  5 + },
  6 +
  7 + render: function(starting_loc, new_tracker) {
  8 + if (!starting_loc){
  9 + starting_loc = new google.maps.LatLng(51.5018, -0.1406); // Set a default - On Tower Bridge in London
  10 + }
4 11
5   - var fenway = new google.maps.LatLng(42.345573,-71.098326);
6   - var mapOptions = { center: fenway, zoom: 14, mapTypeId: google.maps.MapTypeId.ROADMAP };
7   - var panoramaOptions = {
8   - position: fenway,
  12 + this.panoramaOptions = {
  13 + position: starting_loc,
9 14 pov: { heading: 180, pitch: 0, zoom: 1 },
10   - scrollwheel: false,
11   - zoomControl: false,
12   - panControl: false,
13   - linksControl: false,
14   - addressControl: false
  15 + scrollwheel: false, zoomControl: false, panControl: false, linksControl: false, addressControl: false
15 16 };
16   - var map = new google.maps.Map(this.el, mapOptions);
17   - var panorama = new google.maps.StreetViewPanorama(this.el, panoramaOptions);
18   - map.setStreetView(panorama);
19 17
20   - var videoInput = $('#inputVideo')[0];
21   - var canvasInput = $('#inputCanvas')[0];
  18 + if (new_tracker){
  19 + var videoInput = $('#inputVideo')[0];
  20 + var canvasInput = $('#inputCanvas')[0];
  21 + var htracker = new headtrackr.Tracker();
  22 + htracker.init(videoInput, canvasInput);
  23 + htracker.start();
22 24
23   - var htracker = new headtrackr.Tracker();
24   - htracker.init(videoInput, canvasInput);
25   - htracker.start();
  25 + this.panorama = new google.maps.StreetViewPanorama(this.el, this.panoramaOptions);
  26 + this.panorama.setVisible(true);
26 27
27   - this.panorama = panorama;
  28 + // Throttle the calling of the handler for head movement events to once every 20ms
  29 + var throttled_update = _.throttle(this.handleHeadMovement, 20);
  30 + var pov = this.panorama.pov;
28 31
29   - // Throttle the calling of the handler for head movement events to once every 20ms
30   - var throttled_update = _.throttle(this.handleHeadMovement, 20);
31   - var pov = this.panorama.pov;
  32 + $(document).on('headtrackingEvent', function(e){
  33 + throttled_update(pov, e);
  34 + });
  35 +
  36 + this.registerSearchView(this.panorama, this);
  37 + } else {
  38 + this.panorama = new google.maps.StreetViewPanorama(this.el, this.panoramaOptions);
  39 + this.panorama.setVisible(true);
  40 + }
  41 + },
32 42
33   - $(document).on('headtrackingEvent', function(e){
34   - throttled_update(pov, e);
  43 + registerSearchView: function(panorama, mainView){
  44 + var search_box = new Address_Search_View({
  45 + el: '#searchInput',
  46 + map: null,
  47 + pano: panorama,
  48 + mainView: mainView
35 49 });
  50 + search_box.render();
36 51 },
37 52
38 53 handleHeadMovement: function(currentPov, e){
39 54
40   - // Get the amount the head moved left/right and up/down of the camera
41   - var head_x = e.originalEvent.x * 2;
42   - var head_y = e.originalEvent.y;
  55 + // Get the amount the head moved left/right and up/down relative to the camera
  56 + var head_x = e.originalEvent.x;
  57 + var head_y = e.originalEvent.y / 2;
43 58
44 59 // Calculate a new heading and pitch
45 60 var new_heading = Math.max(0, Math.min(currentPov.heading - head_x, 360));
@@ -48,7 +63,7 @@
48 63 var newPov = {
49 64 heading: new_heading,
50 65 pitch: new_pitch,
51   - zoom: 0
  66 + zoom: 1
52 67 };
53 68
54 69 this.panorama.setPov(newPov);
38 js/views/search.js
... ... @@ -0,0 +1,38 @@
  1 +
  2 +
  3 + var Address_Search_View = Backbone.View.extend({
  4 +
  5 + initialize: function(config){
  6 + _.bindAll(this);
  7 +
  8 + this.panorama = config.panorama;
  9 + this.mainView = config.mainView;
  10 + },
  11 +
  12 + render: function(){
  13 + $('#searchForm').on('submit', function(e){
  14 + e.preventDefault();
  15 + });
  16 +
  17 + var input = this.el;
  18 + var searchBox = new google.maps.places.SearchBox(input);
  19 + var sv = new google.maps.StreetViewService();
  20 +
  21 + self = this;
  22 + google.maps.event.addListener(searchBox, 'places_changed', function() {
  23 + var place = searchBox.getPlaces()[0];
  24 + var newPan = sv.getPanoramaByLocation(place.geometry.location, 100, self.panoramaCallback);
  25 + });
  26 + },
  27 +
  28 + panoramaCallback: function(data, status){
  29 + if (status == google.maps.StreetViewStatus.OK) {
  30 + entryPanoId = data.location.pano;
  31 +
  32 + console.log(data.location);
  33 + this.mainView.render(data.location.latLng);
  34 + } else {
  35 + alert("Sorry, I can't find street view data. Try somewhere nearby?");
  36 + }
  37 + }
  38 + });

0 comments on commit 80ff4a1

Please sign in to comment.
Something went wrong with that request. Please try again.