diff options
author | Eric Guzman | 2012-03-27 10:22:42 -0700 |
---|---|---|
committer | Eric Guzman | 2012-03-27 10:22:42 -0700 |
commit | 309b201017da2a4094df4f06adeeff9d396b193a (patch) | |
tree | 92257b32855bcd31dd74967b085a6632fd7dbe9b /node_modules/montage/ui/map.reel/map.js | |
parent | da03585a0b03220281f6d54d9acf0ae0fafaef16 (diff) | |
parent | 309dde5a8c4599cef6a1052c1ff9ee1ad8ec5858 (diff) | |
download | ninja-309b201017da2a4094df4f06adeeff9d396b193a.tar.gz |
Merge branch 'refs/heads/master' into PresetsPI
Diffstat (limited to 'node_modules/montage/ui/map.reel/map.js')
-rw-r--r-- | node_modules/montage/ui/map.reel/map.js | 289 |
1 files changed, 289 insertions, 0 deletions
diff --git a/node_modules/montage/ui/map.reel/map.js b/node_modules/montage/ui/map.reel/map.js new file mode 100644 index 00000000..cba08a42 --- /dev/null +++ b/node_modules/montage/ui/map.reel/map.js | |||
@@ -0,0 +1,289 @@ | |||
1 | /* <copyright> | ||
2 | This file contains proprietary software owned by Motorola Mobility, Inc.<br/> | ||
3 | No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.<br/> | ||
4 | (c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved. | ||
5 | </copyright> */ | ||
6 | /** | ||
7 | |||
8 | @requires montage/core/core | ||
9 | @requires montage/ui/component | ||
10 | */ | ||
11 | var Montage = require("montage").Montage, | ||
12 | Component = require("ui/component").Component; | ||
13 | |||
14 | /** | ||
15 | @class module:"montage/ui/google/map.reel".Map | ||
16 | @extends module:montage/ui/component.Component | ||
17 | */ | ||
18 | var Map = exports.Map = Montage.create(Component, /** @lends module:"montage/ui/toggle-switch.reel".ToggleSwitch# */ { | ||
19 | |||
20 | didCreate: { | ||
21 | value: function() { | ||
22 | var self = this; | ||
23 | window.initialize = function initialize() { | ||
24 | console.log('google maps api loaded'); | ||
25 | self._mapLoaded = true; | ||
26 | self._geoCoder = new google.maps.Geocoder(); | ||
27 | self.needsDraw = true; | ||
28 | }; | ||
29 | } | ||
30 | }, | ||
31 | |||
32 | _geoCoder: {value: null}, | ||
33 | |||
34 | // HTMLElement to load the Map into | ||
35 | mapEl: {value: null}, | ||
36 | |||
37 | _mapLoaded: { | ||
38 | enumerable: false, | ||
39 | value: false | ||
40 | }, | ||
41 | _map: { | ||
42 | enumerable: false, | ||
43 | value: false | ||
44 | }, | ||
45 | |||
46 | // Sunnyvale, CA | ||
47 | defaultLatLng: { | ||
48 | value: {lat: 37.37, lng: -122.03} | ||
49 | }, | ||
50 | |||
51 | _latLng: { | ||
52 | value: this.defaultLatLng, | ||
53 | distinct: true | ||
54 | }, | ||
55 | latLng: { | ||
56 | get: function() { | ||
57 | return this._latLng; | ||
58 | }, | ||
59 | set: function(value) { | ||
60 | if(value) { | ||
61 | this._latLng = value; | ||
62 | // refresh the map | ||
63 | this.needsDraw = true; | ||
64 | } | ||
65 | } | ||
66 | }, | ||
67 | |||
68 | // {lat, lon} Or a String representing the location (eg: Paris, France) | ||
69 | center: { | ||
70 | get: function() { | ||
71 | return this._center; | ||
72 | }, | ||
73 | set: function(value) { | ||
74 | if(value) { | ||
75 | var self = this, geocoder = this._geoCoder; | ||
76 | this._center = value; | ||
77 | if(this._mapLoaded) { | ||
78 | |||
79 | if(String.isString(value)) { | ||
80 | // geocode | ||
81 | geocoder.geocode( { 'address': value}, function(results, status) { | ||
82 | if (status == google.maps.GeocoderStatus.OK) { | ||
83 | var loc = results[0].geometry.location; | ||
84 | self.latLng = {lat: loc.lat(), lng: loc.lng()}; | ||
85 | } else { | ||
86 | console.log('Geocode was not successful : ' + status); | ||
87 | } | ||
88 | }); | ||
89 | } else if(value.lat && value.lng) { | ||
90 | this.latLng = value; | ||
91 | } else { | ||
92 | // default location | ||
93 | this.latLng = this.defaultLatLng; | ||
94 | } | ||
95 | |||
96 | } | ||
97 | |||
98 | } | ||
99 | |||
100 | } | ||
101 | }, | ||
102 | |||
103 | category: { | ||
104 | get: function() { | ||
105 | return this._category; | ||
106 | }, | ||
107 | set: function(value) { | ||
108 | console.log('category set: ' + value); | ||
109 | if(value) { | ||
110 | this._category = value; | ||
111 | this._getPlaces(this._category); | ||
112 | this.needsDraw = true; | ||
113 | } | ||
114 | } | ||
115 | }, | ||
116 | |||
117 | trafficLayer: {value: null}, | ||
118 | _traffic: {value: null}, | ||
119 | traffic: { | ||
120 | get: function() { | ||
121 | return this._traffic; | ||
122 | }, | ||
123 | set: function(value) { | ||
124 | if(value !== this._traffic) { | ||
125 | this._traffic = value; | ||
126 | this.needsDraw = true; | ||
127 | } | ||
128 | } | ||
129 | }, | ||
130 | |||
131 | |||
132 | zoomValue: { | ||
133 | value: 8 | ||
134 | }, | ||
135 | |||
136 | __places: {value: null}, | ||
137 | _places: { | ||
138 | get: function() { | ||
139 | return this.__places; | ||
140 | }, | ||
141 | set: function(value) { | ||
142 | if(value) { | ||
143 | this.__places = value; | ||
144 | this.needsDraw = true; | ||
145 | } | ||
146 | } | ||
147 | }, | ||
148 | |||
149 | _getPlaces: { | ||
150 | value: function(type, keyword) { | ||
151 | var self = this; | ||
152 | var request = { | ||
153 | location: new window.google.maps.LatLng(this.latLng.lat, this.latLng.lng), | ||
154 | radius: 5000, | ||
155 | types: [type] | ||
156 | }; | ||
157 | if(!this._infoWindow) { | ||
158 | this._infoWindow = new google.maps.InfoWindow(); | ||
159 | } | ||
160 | var service = new google.maps.places.PlacesService(this._map); | ||
161 | service.search(request, function(results, status) { | ||
162 | console.log('got places for ', self.category, status, results); | ||
163 | if (status == google.maps.places.PlacesServiceStatus.OK) { | ||
164 | self._places = results; | ||
165 | } else { | ||
166 | self._places = []; | ||
167 | } | ||
168 | }); | ||
169 | } | ||
170 | }, | ||
171 | |||
172 | _infoWindow: {value: null}, | ||
173 | _markers: {value: null}, | ||
174 | _createMarker: { | ||
175 | value: function(place) { | ||
176 | var placeLoc = place.geometry.location, map = this._map; | ||
177 | var icon, image; | ||
178 | switch(this.category) { | ||
179 | case 'restaurant': | ||
180 | icon = '48-fork-and-knife.png'; | ||
181 | break; | ||
182 | case 'hospital': | ||
183 | icon = '10-medical.png'; | ||
184 | break; | ||
185 | case 'bar': | ||
186 | icon = '88-beer-mug.png'; | ||
187 | break; | ||
188 | case 'grocery_or_supermarket': | ||
189 | icon = '80-shopping-cart.png'; | ||
190 | break; | ||
191 | case 'museum': | ||
192 | icon = '41-picture-frame.png'; | ||
193 | break; | ||
194 | case 'gas_station': | ||
195 | icon = '47-fuel.png'; | ||
196 | break; | ||
197 | }; | ||
198 | if(icon) { | ||
199 | image = new google.maps.MarkerImage('images/' + icon); | ||
200 | } | ||
201 | var options = { | ||
202 | map: map, | ||
203 | position: place.geometry.location | ||
204 | }; | ||
205 | if(image) { | ||
206 | options.icon = image; | ||
207 | } | ||
208 | |||
209 | var marker = new google.maps.Marker(options); | ||
210 | if(!this._markers) { | ||
211 | this._markers = []; | ||
212 | } | ||
213 | this._markers.push(marker); | ||
214 | |||
215 | var infoWindow = this._infoWindow; | ||
216 | google.maps.event.addListener(marker, 'click', function() { | ||
217 | infoWindow.setContent(place.name + '<br/>' + place.vicinity); | ||
218 | infoWindow.open(map, this); | ||
219 | }); | ||
220 | } | ||
221 | }, | ||
222 | |||
223 | _removeAllMarkers: { | ||
224 | value: function() { | ||
225 | if(this._markers && this._markers.length > 0) { | ||
226 | var i=0, len = this._markers.length; | ||
227 | for(i; i< len; i++) { | ||
228 | this._markers[i].setMap(null); | ||