diff options
Diffstat (limited to 'node_modules/montage/ui/map.reel/map.js')
-rw-r--r-- | node_modules/montage/ui/map.reel/map.js | 283 |
1 files changed, 283 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..c03d51c5 --- /dev/null +++ b/node_modules/montage/ui/map.reel/map.js | |||
@@ -0,0 +1,283 @@ | |||
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 | _latitude: { | ||
46 | enumerable: false, | ||
47 | value: -34.397 | ||
48 | }, | ||
49 | latitude: { | ||
50 | enumerable: false, | ||
51 | set: function(value) { | ||
52 | this._latitude = value; | ||
53 | this.needsDraw = true; | ||
54 | }, | ||
55 | get: function() { | ||
56 | return this._latitude; | ||
57 | } | ||
58 | }, | ||
59 | _longitude: { | ||
60 | enumerable: false, | ||
61 | value: -34.397 | ||
62 | }, | ||
63 | longitude: { | ||
64 | enumerable: false, | ||
65 | set: function(value) { | ||
66 | this._longitude = value; | ||
67 | this.needsDraw = true; | ||
68 | }, | ||
69 | get: function() { | ||
70 | return this._longitude; | ||
71 | } | ||
72 | }, | ||
73 | |||
74 | defaultLatLng: { | ||
75 | value: {lat: -34.397, lng: 150.644} | ||
76 | }, | ||
77 | |||
78 | _latLng: { | ||
79 | value: this.defaultLatLng, | ||
80 | distinct: true | ||
81 | }, | ||
82 | latLng: { | ||
83 | get: function() { | ||
84 | return this._latLng; | ||
85 | }, | ||
86 | set: function(value) { | ||
87 | if(value) { | ||
88 | this._latLng = value; | ||
89 | // refresh the map | ||
90 | this.needsDraw = true; | ||
91 | } | ||
92 | } | ||
93 | }, | ||
94 | |||
95 | // {lat, lon} Or a String representing the location (eg: Paris, France) | ||
96 | center: { | ||
97 | get: function() { | ||
98 | return this._center; | ||
99 | }, | ||
100 | set: function(value) { | ||
101 | if(value) { | ||
102 | var self = this, geocoder = this._geoCoder; | ||
103 | this._center = value; | ||
104 | if(this._mapLoaded) { | ||
105 | |||
106 | if(String.isString(value)) { | ||
107 | // geocode | ||
108 | geocoder.geocode( { 'address': value}, function(results, status) { | ||
109 | if (status == google.maps.GeocoderStatus.OK) { | ||
110 | var loc = results[0].geometry.location; | ||
111 | self.latLng = {lat: loc.lat(), lng: loc.lng()}; | ||
112 | } else { | ||
113 | console.log('Geocode was not successful : ' + status); | ||
114 | } | ||
115 | }); | ||
116 | } else if(value.lat && value.lng) { | ||
117 | this.latLng = value; | ||
118 | } else { | ||
119 | // default location | ||
120 | this.latLng = this.defaultLatLng; | ||
121 | } | ||
122 | |||
123 | } | ||
124 | |||
125 | } | ||
126 | |||
127 | } | ||
128 | }, | ||
129 | |||
130 | category: { | ||
131 | get: function() { | ||
132 | return this._category; | ||
133 | }, | ||
134 | set: function(value) { | ||
135 | if(value) { | ||
136 | this._category = value; | ||
137 | this._getPlaces(this._category); | ||
138 | this.needsDraw = true; | ||
139 | } | ||
140 | } | ||
141 | }, | ||
142 | |||
143 | zoomValue: { | ||
144 | value: 8 | ||
145 | }, | ||
146 | |||
147 | __places: {value: null}, | ||
148 | _places: { | ||
149 | get: function() { | ||
150 | return this.__places; | ||
151 | }, | ||
152 | set: function(value) { | ||
153 | if(value) { | ||
154 | this.__places = value; | ||
155 | this.needsDraw = true; | ||
156 | } | ||
157 | } | ||
158 | }, | ||
159 | |||
160 | _getPlaces: { | ||
161 | value: function(type, keyword) { | ||
162 | var self = this; | ||
163 | var request = { | ||
164 | location: new window.google.maps.LatLng(this.latLng.lat, this.latLng.lng), | ||
165 | radius: 5000, | ||
166 | types: [type] | ||
167 | }; | ||
168 | if(!this._infoWindow) { | ||
169 | this._infoWindow = new google.maps.InfoWindow(); | ||
170 | } | ||
171 | var service = new google.maps.places.PlacesService(this._map); | ||
172 | service.search(request, function(results, status) { | ||
173 | if (status == google.maps.places.PlacesServiceStatus.OK) { | ||
174 | self._places = results; | ||
175 | } else { | ||
176 | self._places = []; | ||
177 | } | ||
178 | }); | ||
179 | } | ||
180 | }, | ||
181 | |||
182 | _infoWindow: {value: null}, | ||
183 | _markers: {value: null}, | ||
184 | _createMarker: { | ||
185 | value: function(place) { | ||
186 | var placeLoc = place.geometry.location, map = this._map; | ||
187 | var icon, image; | ||
188 | switch(this.category) { | ||
189 | case 'restaurant': | ||
190 | icon = '48-fork-and-knife.png'; | ||
191 | break; | ||
192 | case 'hospital': | ||
193 | icon = '10-medical.png'; | ||
194 | break; | ||
195 | case 'cafe': | ||
196 | icon = '34-coffee.png'; | ||
197 | break; | ||
198 | case 'museum': | ||
199 | icon = '41-picture-frame.png'; | ||
200 | break; | ||
201 | }; | ||
202 | if(icon) { | ||
203 | image = new google.maps.MarkerImage('images/' + icon); | ||
204 | } | ||
205 | var options = { | ||
206 | map: map, | ||
207 | position: place.geometry.location | ||
208 | }; | ||
209 | if(image) { | ||
210 | options.icon = image; | ||
211 | } | ||
212 | |||
213 | var marker = new google.maps.Marker(options); | ||
214 | if(!this._markers) { | ||
215 | this._markers = []; | ||
216 | } | ||
217 | this._markers.push(marker); | ||
218 | |||
219 | var infoWindow = this._infoWindow; | ||
220 | google.maps.event.addListener(marker, 'click', function() { | ||
221 | infoWindow.setContent(place.name + '<br/>' + place.vicinity); | ||
222 | infoWindow.open(map, this); | ||
223 | }); | ||
224 | } | ||
225 | }, | ||
226 | |||
227 | _removeAllMarkers: { | ||
228 | value: function() { | ||
229 | if(this._markers && this._markers.length > 0) { | ||
230 | var i=0, len = this._markers.length; | ||
231 | for(i; i< len; i++) { | ||
232 | this._markers[i].setMap(null); | ||
233 | } | ||