|
3 | 3 | <head>
|
4 | 4 | <title>SF Movies | Find out where the best movies happened in San Fransisco</title>
|
5 | 5 | <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
|
6 |
| - <style type="text/css"> |
7 |
| - html, body, #map-canvas { |
8 |
| - height: 100%; |
9 |
| - margin: 0; |
10 |
| - padding: 0; |
11 |
| - } |
12 |
| - |
13 |
| - ul { |
14 |
| - list-style-position: outside; |
15 |
| - list-style-type: none; |
16 |
| - margin: 0 10px 0 0; |
17 |
| - padding: 0; |
18 |
| - } |
19 |
| - |
20 |
| - li { |
21 |
| - background-color: #fff; |
22 |
| - width: 100%; |
23 |
| - display: list-item; |
24 |
| - margin: 0; |
25 |
| - padding: 10px 15px; |
26 |
| - font-size: 1.4em; |
27 |
| - } |
28 |
| - |
29 |
| - li span { |
30 |
| - font-size: smaller; |
31 |
| - font-style: italic; |
32 |
| - } |
33 |
| - |
34 |
| - li .locations { |
35 |
| - font-size: smaller; |
36 |
| - color: #777; |
37 |
| - } |
38 |
| - |
39 |
| - li:hover { |
40 |
| - background-color: #eee; |
41 |
| - cursor: pointer; |
42 |
| - } |
43 |
| - |
44 |
| - #dashboard, #film_detail, #location_detail { |
45 |
| - padding-left: 10px; |
46 |
| - padding-right: 10px; |
47 |
| - } |
48 |
| - |
49 |
| - #top { |
50 |
| - width: 85%; |
51 |
| - } |
52 |
| - |
53 |
| - #top img { |
54 |
| - float: left; |
55 |
| - margin-right: 20px; |
56 |
| - } |
57 |
| - |
58 |
| - #top input { |
59 |
| - width: 100%; |
60 |
| - padding: 10px; |
61 |
| - margin: 10px 0 0 0; |
62 |
| - font-size: 16px; |
63 |
| - } |
64 |
| - |
65 |
| - .watermark { |
66 |
| - color: #666; |
67 |
| - } |
68 |
| - |
69 |
| - input[type=button] { |
70 |
| - background: #999; |
71 |
| - background-image: -webkit-linear-gradient(top, #999, #333); |
72 |
| - background-image: -moz-linear-gradient(top, #999, #333); |
73 |
| - background-image: -ms-linear-gradient(top, #999, #333); |
74 |
| - background-image: -o-linear-gradient(top, #999, #333); |
75 |
| - background-image: linear-gradient(to bottom, #999, #333); |
76 |
| - -webkit-border-radius: 8; |
77 |
| - -moz-border-radius: 8; |
78 |
| - border-radius: 8px; |
79 |
| - color: #ffffff; |
80 |
| - padding: 5px; |
81 |
| - text-decoration: none; |
82 |
| - } |
83 |
| - |
84 |
| - ::-webkit-scrollbar { |
85 |
| - -webkit-appearance: none; |
86 |
| - width: 7px; |
87 |
| - } |
88 |
| - |
89 |
| - ::-webkit-scrollbar-thumb { |
90 |
| - border-radius: 4px; |
91 |
| - background-color: rgba(0,0,0,.5); |
92 |
| - -webkit-box-shadow: 0 0 1px rgba(255,255,255,.5); |
93 |
| - } |
94 |
| - </style> |
95 |
| - <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAmB6mTdjeQQrC3idzFKh1Vi5mwZ_5ogqo"></script> |
| 6 | + <link rel="stylesheet" type="text/css" href="style.css"> |
| 7 | + <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false"></script> |
96 | 8 | <script type="text/javascript">
|
97 | 9 | /*
|
98 | 10 | * NOTE: this (probably) isn't how you should be doing JavaScript!
|
|
124 | 36 | map = new google.maps.Map(mapDiv, mapOptions);
|
125 | 37 |
|
126 | 38 | var searchControlDiv = document.createElement('div');
|
127 |
| - searchControlDiv.index = 1; |
128 | 39 | searchControlDiv.id = 'top';
|
| 40 | + searchControlDiv.className = 'top'; |
129 | 41 |
|
130 | 42 | new SearchControl(searchControlDiv, map);
|
131 | 43 | map.controls[google.maps.ControlPosition.TOP_LEFT].push(searchControlDiv);
|
132 | 44 |
|
133 | 45 | var homeControlDiv = document.createElement('div');
|
134 |
| - homeControlDiv.index = 1; |
135 | 46 | homeControlDiv.id = 'bottom_panel';
|
136 |
| - homeControlDiv.style.backgroundColor = 'white'; |
137 |
| - homeControlDiv.style.borderStyle = 'solid'; |
138 |
| - homeControlDiv.style.borderColor = '#ccc'; |
139 |
| - homeControlDiv.style.borderWidth = '1px'; |
140 |
| - homeControlDiv.style.width = '100%'; |
141 |
| - homeControlDiv.style.height = '150px'; |
142 |
| - homeControlDiv.index = 1; |
| 47 | + homeControlDiv.className = 'bottom_panel'; |
143 | 48 |
|
144 | 49 | new HomeControl(homeControlDiv, map);
|
145 | 50 | map.controls[google.maps.ControlPosition.BOTTOM_CENTER].push(homeControlDiv);
|
|
153 | 58 | controlUI.type = 'text';
|
154 | 59 | controlUI.name = 'q';
|
155 | 60 | controlUI.id = 'q';
|
156 |
| - controlDiv.style.padding = '10px'; |
157 | 61 | controlUI.value = watermark;
|
158 | 62 | controlUI.className = 'watermark';
|
159 | 63 | controlUI.autocomplete = 'off';
|
|
181 | 85 |
|
182 | 86 | var resultsUI = document.createElement('div');
|
183 | 87 | resultsUI.id = 'films_results';
|
184 |
| - resultsUI.index = 1; |
185 | 88 | controlDiv.appendChild(resultsUI);
|
186 | 89 | }
|
187 | 90 |
|
|
282 | 185 | // Set CSS for the control interior.
|
283 | 186 | var controlText = document.createElement('div');
|
284 | 187 | controlText.id = 'film_detail';
|
| 188 | + controlText.className = 'film_detail'; |
285 | 189 | controlText.innerHTML = '<h2>' + response + '</h2><br><em>Loading locations and content...</em>';
|
286 | 190 |
|
287 | 191 | document.getElementById('bottom_panel').appendChild(controlText);
|
|
357 | 261 | }
|
358 | 262 |
|
359 | 263 | locationDiv.id = 'location_detail';
|
| 264 | + locationDiv.className = 'location_detail'; |
360 | 265 | locationDiv.style.display = '';
|
361 | 266 | locationDiv.innerHTML = '<h2>' + location.location + '</h2><img src="https://maps.googleapis.com/maps/api/streetview?size=120x120&location=' + location.geo.lat + ',' + location.geo.lng + '" align="right">';
|
362 | 267 |
|
|
425 | 330 | var dashBoard = document.createElement('div');
|
426 | 331 | dashBoard.innerHTML = '<h2>SF Movies</h2><div>See film locations for all movies filmed in San Fransisco. <strong>Click on a marker to see more information about a location.</strong>.</div><p>This is a sample project from <a href="http://www.bradoncode.com">Bradley Braithwaite</a>.</p>';
|
427 | 332 | dashBoard.id = 'dashboard';
|
| 333 | + dashBoard.className = 'dashboard'; |
428 | 334 |
|
429 | 335 | controlDiv.appendChild(dashBoard);
|
430 | 336 | }
|
|
0 commit comments