9
9
< script type ="text/javascript " src ="https://maps.googleapis.com/maps/api/js?sensor=false "> </ script >
10
10
< script type ="text/javascript " src ="map-service.js "> </ script >
11
11
< script type ="text/javascript " src ="templates.js "> </ script >
12
+ < script type ="text/javascript " src ="home-control.js "> </ script >
13
+ < script type ="text/javascript " src ="search-control.js "> </ script >
14
+ < script type ="text/javascript " src ="location-control.js "> </ script >
15
+ < script type ="text/javascript " src ="movie-control.js "> </ script >
12
16
</ head >
13
17
< body >
14
18
< div id ="map-canvas "> </ div >
15
19
< script type ="text/javascript ">
16
- /*
17
- * NOTE: this (probably) isn't how you should be doing JavaScript!
18
- */
19
- var map ;
20
+ /*
21
+ * NOTE: this (probably) isn't how you should be doing JavaScript!
22
+ */
23
+ var map ;
20
24
21
- function initialize ( ) {
22
- var mapDiv = document . getElementById ( 'map-canvas' ) ;
23
- map = new MapService ( window . google , mapDiv ) ;
25
+ function initialize ( ) {
26
+ var mapDiv = document . getElementById ( 'map-canvas' ) ;
27
+ map = new MapService ( window . google , mapDiv ) ;
24
28
25
- var searchControlDiv = document . createElement ( 'div' ) ;
26
- searchControlDiv . id = 'top' ;
27
- searchControlDiv . className = 'top' ;
29
+ var searchControlDiv = document . createElement ( 'div' ) ;
30
+ searchControlDiv . id = 'top' ;
31
+ searchControlDiv . className = 'top' ;
28
32
29
- new SearchControl ( searchControlDiv , map ) ;
30
- map . addView ( searchControlDiv , 'TOP_LEFT' ) ;
33
+ new SearchControl ( searchControlDiv , map ) ;
34
+ map . addView ( searchControlDiv , 'TOP_LEFT' ) ;
31
35
32
- var homeControlDiv = document . createElement ( 'div' ) ;
33
- homeControlDiv . id = 'bottom_panel' ;
34
- homeControlDiv . className = 'bottom_panel' ;
36
+ var homeControlDiv = document . createElement ( 'div' ) ;
37
+ homeControlDiv . id = 'bottom_panel' ;
38
+ homeControlDiv . className = 'bottom_panel' ;
35
39
36
- new HomeControl ( homeControlDiv , map ) ;
37
- map . addView ( homeControlDiv , 'BOTTOM_CENTER' ) ;
38
- }
40
+ new HomeControl ( homeControlDiv , map ) ;
41
+ map . addView ( homeControlDiv , 'BOTTOM_CENTER' ) ;
42
+ }
39
43
40
- google . maps . event . addDomListener ( window , 'load' , initialize ) ;
41
-
42
- /*
43
- * Search Panel
44
- */
45
- function SearchControl ( controlDiv , map ) {
46
- var movieClicked = function ( item ) {
47
- map . clearMarkers ( ) ;
48
- map . setOptions ( { streetViewControl : false , zoomControl : true } ) ;
49
- document . getElementById ( 'films_results' ) . innerHTML = '' ;
50
- document . getElementById ( 'q' ) . value = item . title ;
51
- showMovieDetail ( item ) ;
52
- } ;
53
-
54
- var searchInput = document . createElement ( 'input' ) ;
55
- searchInput . type = 'search' ;
56
- searchInput . name = 'q' ;
57
- searchInput . id = 'q' ;
58
- searchInput . placeholder = 'Enter film title...' ;
59
- controlDiv . appendChild ( searchInput ) ;
60
-
61
- new window . Autocomplete ( searchInput , {
62
- url : '/movies/search' ,
63
- param : 'q' ,
64
- label : 'title' ,
65
- value : 'releaseYear' ,
66
- select : function ( item ) {
67
- movieClicked ( item ) ;
68
- }
69
- } ) ;
70
-
71
- var resultsUI = document . createElement ( 'div' ) ;
72
- resultsUI . id = 'films_results' ;
73
- controlDiv . appendChild ( resultsUI ) ;
74
- }
75
-
76
- /*
77
- * Movie Detail
78
- */
79
- function showLocation ( detail , location ) {
80
- return function ( ) {
81
- map . zoomView ( location . geo . lat , location . geo . lng ) ;
82
-
83
- var locationDiv = document . getElementById ( 'location_detail' ) ;
84
-
85
- if ( ! locationDiv ) {
86
- locationDiv = document . createElement ( 'div' ) ;
87
- document . getElementById ( 'bottom_panel' ) . appendChild ( locationDiv ) ;
88
- }
89
-
90
- locationDiv . id = 'location_detail' ;
91
- locationDiv . className = 'location_detail' ;
92
- locationDiv . style . display = '' ;
93
- locationDiv . innerHTML = templates . location ( location ) ;
94
-
95
- var sateliteViewButton = document . createElement ( 'input' ) ;
96
- sateliteViewButton . type = 'button' ;
97
- sateliteViewButton . value = 'Satelite View' ;
98
-
99
- sateliteViewButton . addEventListener ( 'click' , function ( ) {
100
-
101
- if ( this . value === 'Satelite View' ) {
102
- map . sateliteView ( location . geo . lat , location . geo . lng ) ;
103
- this . value = 'Back to Roadmap'
104
- } else {
105
- map . roadmapView ( location . geo . lat , location . geo . lng ) ;
106
- this . value = 'Satelite View'
107
- }
108
-
109
- } ) ;
110
-
111
- locationDiv . appendChild ( sateliteViewButton ) ;
112
-
113
- var streetViewButton = document . createElement ( 'input' ) ;
114
- streetViewButton . type = 'button' ;
115
- streetViewButton . value = 'Street View' ;
116
-
117
- streetViewButton . addEventListener ( 'click' , function ( ) {
118
- map . streetView ( location . geo . lat , location . geo . lng ) ;
119
- } ) ;
120
-
121
- locationDiv . appendChild ( streetViewButton ) ;
122
-
123
- var backToFilm = document . createElement ( 'input' ) ;
124
- backToFilm . type = 'button' ;
125
- backToFilm . value = 'Back to Film' ;
126
-
127
- backToFilm . addEventListener ( 'click' , function ( ) {
128
- map . reset ( ) ;
129
- var location_detail = document . getElementById ( 'location_detail' ) ;
130
- if ( location_detail ) {
131
- location_detail . style . display = 'none' ;
132
- }
133
-
134
- var film_detail = document . getElementById ( 'film_detail' ) ;
135
- if ( film_detail ) {
136
- film_detail . style . display = '' ;
137
- }
138
- } ) ;
139
-
140
- locationDiv . appendChild ( backToFilm ) ;
141
-
142
- document . getElementById ( 'film_detail' ) . style . display = 'none' ;
143
- }
144
- }
145
-
146
- /*
147
- * Movie Detail
148
- */
149
- function showMovieDetail ( item ) {
150
- displayLoadingPanel ( item . title ) ;
151
- getMoveDetail ( item . title , item . director ) ;
152
- plotLocations ( item ) ;
153
- }
154
-
155
- function plotLocations ( item ) {
156
- var xhr = new XMLHttpRequest ( ) ;
157
- xhr . onload = function ( ) {
158
- var response = this . response ;
159
- for ( var i = 0 ; i < response . locations . length ; i ++ ) {
160
- map . plotLocation (
161
- response . locations [ i ] . geo . lat ,
162
- response . locations [ i ] . geo . lng ,
163
- showLocation ( response , response . locations [ i ] ) ) ;
164
- } ;
165
- }
166
- xhr . open ( "GET" , "/movies/locations?title=" + encodeURIComponent ( item . title ) + '&director=' + encodeURIComponent ( item . director ) ) ;
167
- xhr . responseType = "json" ;
168
- xhr . send ( ) ;
169
- }
170
-
171
- function displayLoadingPanel ( response ) {
172
- var locationDiv = document . getElementById ( 'location_detail' ) ;
173
- if ( locationDiv ) {
174
- locationDiv . style . display = 'none' ;
175
- }
176
-
177
- var dashboard = document . getElementById ( 'dashboard' ) ;
178
- if ( dashboard ) {
179
- dashboard . style . display = 'none' ;
180
- }
181
-
182
- if ( ! document . getElementById ( 'film_detail' ) ) {
183
-
184
- // Set CSS for the control interior.
185
- var controlText = document . createElement ( 'div' ) ;
186
- controlText . id = 'film_detail' ;
187
- controlText . className = 'film_detail' ;
188
- controlText . innerHTML = templates . loading ( response ) ;
189
-
190
- document . getElementById ( 'bottom_panel' ) . appendChild ( controlText ) ;
191
-
192
- } else {
193
-
194
- var controlText = document . getElementById ( 'film_detail' ) ;
195
- controlText . innerHTML = templates . loading ( response ) ; ;
196
- controlText . style . display = '' ;
197
-
198
- }
199
- }
200
-
201
- function getMoveDetail ( title , director ) {
202
- var xhr = new XMLHttpRequest ( ) ;
203
- xhr . onload = function ( ) {
204
- var detail = this . response ;
205
-
206
- document . getElementById ( 'film_detail' ) . innerHTML = templates . movie ( detail ) ;
207
- }
208
- xhr . open ( "GET" , "/movies/content?title=" + encodeURIComponent ( title ) + '&director=' + encodeURIComponent ( director ) ) ;
209
- xhr . responseType = "json" ;
210
- xhr . send ( ) ;
211
- }
212
-
213
- /*
214
- * Homepage Panel
215
- */
216
- function HomeControl ( controlDiv , map ) {
217
- var dashBoard = document . createElement ( 'div' ) ;
218
- dashBoard . innerHTML = templates . home ( ) ;
219
- dashBoard . id = 'dashboard' ;
220
- dashBoard . className = 'dashboard' ;
221
- controlDiv . appendChild ( dashBoard ) ;
222
- }
223
- </ script >
224
- </ body >
44
+ google . maps . event . addDomListener ( window , 'load' , initialize ) ;
45
+ </ script >
46
+ </ body >
225
47
</ html >
0 commit comments