DartからJSを使う その2_1 (Google Maps-Dartソース部分)

次にDartからJSを使っているサンプルを見てみます。

Dart JavaScript Interop Samples
http://dart-lang.github.com/js-interop/example/

以下のサンプルが紹介されています。

・Google Charts API
・Google Maps / Directions API
・Twitter Search via JSONP

Google Mapsを使ってみたいので、DartからJSを使う その1と同じ方法でDirections API を
使ってみると表示することが可能でした。

色んなGoogle Mapsを試してみたいので、まずは基本的なところから
試してみたいと思います。

※追記12/4：さっき気づいたのですが、a14nさんが色々サンプルを
　 公開してくださっています。
　 こちらの方がお薦めです。

-----

まず、Dart Editorを起動させてます。
Dart EditorのメニューのFileから、New Applicationを選択します。
Application Nameは、Maptestとしました。

Maptest.dartと同じ階層に、js.dartを置きます。
私の環境はWindowsXPの為で、Pub Package Managerのインストールは
今度試してみようかと思います。

Maptest.dart を編集
前回の要領で、Maptest.dartを書き換えてみます。

※追記12/4：こちらの方が、JSのGoogle Mapsとほぼ同じように記述可能です。
　　こちらの方がお薦めです。（a14nさんのサンプル）

import 'dart:html';
import 'js.dart' as js;

var maps;
var latlng;

void main() {
　js.scoped(() {

　　maps = js.retain(js.context.google.maps);

　　var myOptions = js.map({
　　　'zoom': 15,
　　　'mapTypeId': maps.MapTypeId.ROADMAP,
　　　'center': latlng,
　　});

　　var map = new js.Proxy(maps.Map, query('#map_canvas'), myOptions);

　});
}

Google Maps JavaScript API V3 チュートリアルのソース
(Google マップ V3 の「Hello, World」)と比べてみると、
ほとんど同じように記述できるのがわかります。