DartからJSを使う その2_2 (Google Maps-HTML, CSS部分)

次にHTMLとCSSの記述について見てみます。
まず、デフォルトで書き出されているCSSを消去します。

Google Maps JavaScript API V3 チュートリアルのソース
(Google マップ V3 の「Hello, World」)に
近いCSSの方がわかりやすいので、それに近い形で書き直します。

Maptest.cssを以下のように記述します。

html {
　　height: 100%;
　　margin: 0;
　　padding: 0;
}

body {
　　height: 100%;
}

#map_canvas {
　　height: 100%;
}

p {
　　color: #333;
}

次にTHML、Maptest.htmlを編集します。

js-interop / example / google-maps / directions.html　を参考に、
Dart Editorからデフォルトで書き出されたHTMLを編集しています。
基本的には太字のところを追加編集しています。

＜!DOCTYPE html＞

＜html＞
　　＜head＞

　　＜meta name="viewport" content="initial-scale=1.0, user-scalable=no"＞

　　＜meta charset="utf-8"＞

　　＜title＞Google Maps and Dart＜/title＞

　　＜link rel="stylesheet" href="maptest.css" type="text/css"＞

　　＜script src="https://maps.googleapis.com/maps/api/js?sensor=false" type="text/javascript"＞＜/script＞

　＜/head＞

　＜!-- ↑ヘッダ部分は見やすいように改行で空白を入れていますが、ソースは詰めています--＞

　＜body＞
　　＜h1＞Maptest＜/h1＞

　　＜p＞Hello from Dart and Google Maps!＜/p＞

　　＜div id="map_canvas"＞＜/div＞


　　＜!--削除した部分
　　　＜div id="container"＞
　　　　＜p id="text"＞＜/p＞
　　　＜/div＞
　　--＞

　　＜script type="application/dart" src="web/maptest.dart"＞＜/script＞
　　＜script src="https://dart.googlecode.com/svn/branches/bleeding_edge/dart/client/dart.js"＞＜/script＞
　＜/body＞
＜/html＞

これで起動するとGoogle Mapsが表示されます。
これも一応Javascriptにコンパイルしています。