OLD | NEW |
| (Empty) |
1 // Copyright (c) 2012, the Dart project authors. Please see the AUTHORS file | |
2 // for details. All rights reserved. Use of this source code is governed by a | |
3 // BSD-style license that can be found in the LICENSE file. | |
4 | |
5 // A JS Interop sample accessing the Google Maps API. The sample is based on | |
6 // the directions-panel example here: | |
7 // https://google-developers.appspot.com/maps/documentation/javascript/examples/
directions-panel | |
8 | |
9 import 'dart:html'; | |
10 import 'package:js/js.dart' as js; | |
11 | |
12 var maps; | |
13 var directionsDisplay; | |
14 var directionsService; | |
15 | |
16 void main() { | |
17 // Save the JS google.maps namespace for convenience. It must be retained | |
18 // as it's used beyond this scope. | |
19 maps = js.retain(js.context.google.maps); | |
20 | |
21 // Allocate a new JS Map with the following options. See: | |
22 // https://developers.google.com/maps/documentation/javascript/reference#Map | |
23 var myOptions = js.map({ | |
24 'zoom': 9, | |
25 'mapTypeId': maps.MapTypeId.ROADMAP, | |
26 'center': new js.Proxy(maps.LatLng, 47.6097, -122.3331) | |
27 }); | |
28 var map = new js.Proxy(maps.Map, query('#map_canvas'), myOptions); | |
29 | |
30 // Allocate a new JS DirectionsRenderer to display directions on the page. | |
31 // See | |
32 // https://developers.google.com/maps/documentation/javascript/reference#Direc
tionsRenderer | |
33 directionsDisplay = | |
34 js.retain(new js.Proxy(maps.DirectionsRenderer, | |
35 js.map({'map': map}))); | |
36 directionsDisplay.setPanel(query('#directions_panel')); | |
37 | |
38 // Allocate a new JS DirectionService to forward requests to the server. | |
39 // See: | |
40 // https://developers.google.com/maps/documentation/javascript/reference#Direc
tionsService | |
41 directionsService = js.retain(new js.Proxy((maps.DirectionsService))); | |
42 | |
43 var control = query('#control'); | |
44 control.style.display = 'block'; | |
45 map.controls[maps.ControlPosition.TOP].push(control); | |
46 | |
47 // Recalculate the route when the start or end points are changed. | |
48 query('#start').onChange.listen(calcRoute); | |
49 query('#end').onChange.listen(calcRoute); | |
50 } | |
51 | |
52 void calcRoute(e) { | |
53 final panel = query('#directions_panel'); | |
54 final SelectElement start = query('#start'); | |
55 final SelectElement end = query('#end'); | |
56 | |
57 panel.innerHtml = "<b>Thinking...</b>"; | |
58 | |
59 // Submit a new directions request. | |
60 final request = js.map({ | |
61 'origin': start.value, | |
62 'destination': end.value, | |
63 'travelMode': maps.DirectionsTravelMode.DRIVING | |
64 }); | |
65 | |
66 // The routing callback is only called once. | |
67 directionsService.route(request, new js.Callback.once((response, status) { | |
68 if (status == maps.DirectionsStatus.OK) { | |
69 document.query('#directions_panel').innerHtml = ""; | |
70 directionsDisplay.setDirections(response); | |
71 } else { | |
72 document.query('#directions_panel').innerHtml = "<b>Err, try flying.</b>"; | |
73 } | |
74 })); | |
75 print('Live ${js.proxyCount()} proxies out of ${js.proxyCount(all: true)} ever
allocated.'); | |
76 } | |
OLD | NEW |