<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key=・・・・&sensor=false"></script>
<style type="text/css">
  #map-canvas { height: 400px }  #panel {
    position: absolute;
    top: 5px;
    left: 50%;
    margin-left: -180px;
    z-index: 5;
    background-color: #fff;
    padding: 5px;
    border: 1px solid #999;
  }
</style>
<div id="panel">
  <input id="address" type="textbox" value="東京都千代田区丸の内１丁目９-１">
  <input type="button" value="Geocode" id="codeAddress">
</div>
<div id="map-canvas"></div>
<script type="application/dart" src='http://www.example.com/wp/wp-content/themes/ang/dart/addr-pos/index.dart'></script>
<script src='http://www.example.com/wp/wp-content/themes/ang/dart/packages/browser/dart.js'></script>
<script src='http://www.example.com/wp/wp-content/themes/ang/dart/packages/browser/interop.js'></script>

library google_maps;

import 'dart:html' show querySelector,window;
import 'dart:js' show context, JsObject;

void main() {
  final google_maps = context['google']['maps'];
  var center = new JsObject(google_maps['LatLng'], [35.6814, 139.7661]);
  var mapTypeId = google_maps['MapTypeId']['ROADMAP'];
  var mapOptions = new JsObject.jsify({
    "center": center,
    "zoom": 15,
    "mapTypeId": mapTypeId
  });
  var map = new JsObject(google_maps['Map'], [querySelector('#map-canvas'), mapOptions]);
  
  var geocoder = new JsObject(google_maps['Geocoder'], []);
  var calcroute = querySelector('#codeAddress');
  calcroute.onClick.listen((event) {
    var address = querySelector('#address');
    var geoOptions = new JsObject.jsify({
      'address': address.value
    });
    geocoder.callMethod('geocode',[geoOptions, (results, status) {
      if (status == google_maps['GeocoderStatus']['OK']) {
        map.callMethod('setCenter',[results[0]['geometry']['location']]);
        var markerOptions = new JsObject.jsify({
          "map": map,
          "position": results[0]['geometry']['location']
        });
        var marker = new JsObject(google_maps['Marker'],[markerOptions]);
      } else {
        window.alert('Geocode was not successful for the following reason: ' + status);
      }
    }]);
  });
}