| OLD | NEW |
| (Empty) |
| 1 // Copyright (c) 2013, 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 marker-simple example here: | |
| 7 // https://google-developers.appspot.com/maps/documentation/javascript/examples/
marker-simple | |
| 8 // | |
| 9 // In this example you can see how to build a typed Dart API based on js API. | |
| 10 // Doing this, you will improve developper experience (content assist, errors on | |
| 11 // undefined members...). | |
| 12 | |
| 13 import 'dart:html'; | |
| 14 import 'package:js/js.dart' as js; | |
| 15 | |
| 16 final maps = js.retain(js.context.google.maps); | |
| 17 | |
| 18 class LatLng implements js.Serializable<js.Proxy> { | |
| 19 final js.Proxy _proxy; | |
| 20 | |
| 21 LatLng(num lat, num lng) : this._(new js.Proxy(maps.LatLng, lat, lng)); | |
| 22 LatLng._(this._proxy); | |
| 23 | |
| 24 js.Proxy toJs() => _proxy; | |
| 25 } | |
| 26 | |
| 27 class MapTypeId implements js.Serializable<String> { | |
| 28 static final HYBRID = new MapTypeId._(maps.MapTypeId.HYBRID); | |
| 29 static final ROADMAP = new MapTypeId._(maps.MapTypeId.ROADMAP); | |
| 30 static final SATELLITE = new MapTypeId._(maps.MapTypeId.SATELLITE); | |
| 31 static final TERRAIN = new MapTypeId._(maps.MapTypeId.TERRAIN); | |
| 32 | |
| 33 String _value; | |
| 34 | |
| 35 MapTypeId._(this._value); | |
| 36 | |
| 37 String toJs() => this._value; | |
| 38 } | |
| 39 | |
| 40 class MapOptions implements js.Serializable<js.Proxy> { | |
| 41 final js.Proxy _proxy; | |
| 42 | |
| 43 MapOptions() : this._(new js.Proxy(js.context.Object)); | |
| 44 MapOptions._(this._proxy); | |
| 45 | |
| 46 set center(LatLng center) => _proxy.center = center; | |
| 47 set mapTypeId(MapTypeId mapTypeId) => _proxy.mapTypeId = mapTypeId; | |
| 48 set zoom(num zoom) => _proxy.zoom = zoom; | |
| 49 | |
| 50 js.Proxy toJs() => _proxy; | |
| 51 } | |
| 52 | |
| 53 class GMap implements js.Serializable<js.Proxy> { | |
| 54 final js.Proxy _proxy; | |
| 55 | |
| 56 GMap(Element container, MapOptions options) : this._(new js.Proxy(maps.Map, co
ntainer, options)); | |
| 57 GMap._(this._proxy); | |
| 58 | |
| 59 set center(LatLng center) => _proxy.center = center; | |
| 60 set mapTypeId(MapTypeId mapTypeId) => _proxy.mapTypeId = mapTypeId; | |
| 61 set zoom(num zoom) => _proxy.zoom = zoom; | |
| 62 | |
| 63 js.Proxy toJs() => _proxy; | |
| 64 } | |
| 65 | |
| 66 class MarkerOptions implements js.Serializable<js.Proxy> { | |
| 67 final js.Proxy _proxy; | |
| 68 | |
| 69 MarkerOptions() : this._(new js.Proxy(js.context.Object)); | |
| 70 MarkerOptions._(this._proxy); | |
| 71 | |
| 72 set position(LatLng position) => _proxy.position = position; | |
| 73 set map(GMap map) => _proxy.map = map; | |
| 74 set title(String title) => _proxy.title = title; | |
| 75 | |
| 76 js.Proxy toJs() => _proxy; | |
| 77 } | |
| 78 | |
| 79 class Marker implements js.Serializable<js.Proxy> { | |
| 80 final js.Proxy _proxy; | |
| 81 | |
| 82 Marker(MarkerOptions options) : this._(new js.Proxy(maps.Marker, options)); | |
| 83 Marker._(this._proxy); | |
| 84 | |
| 85 js.Proxy toJs() => _proxy; | |
| 86 } | |
| 87 | |
| 88 void main() { | |
| 89 js.scoped(() { | |
| 90 final myLatlng = new LatLng(-25.363882,131.044922); | |
| 91 final mapOptions = new MapOptions() | |
| 92 ..zoom = 4 | |
| 93 ..center = myLatlng | |
| 94 ..mapTypeId = MapTypeId.ROADMAP | |
| 95 ; | |
| 96 final map = new GMap(query("#map_canvas"), mapOptions); | |
| 97 | |
| 98 final marker = new Marker(new MarkerOptions() | |
| 99 ..position = myLatlng | |
| 100 ..map = map | |
| 101 ..title = "Hello World!" | |
| 102 ); | |
| 103 }); | |
| 104 } | |
| OLD | NEW |