<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">
      <b>Start: </b>
      <select id="start">
        <option value="35.6814,139.7661">東京駅</option>
        <option value="35.6842,139.7629">大手町駅</option>
      </select>
      <b>End: </b>
      <select id="end">
        <option value="35.6857,139.7612">大手門</option>
        <option value="35.6795,139.7577">二重橋前</option>
      </select>
    </div>
    <div id="map-canvas"></div>
<script type="application/dart" src='http://www.example.com/wp/wp-content/themes/ang/dart/marker1/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;
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 polyOptions = new JsObject.jsify({
    "strokeColor": '#ff0000',
    "strokeOpacity": 0.7,
    "strokeWeight": 7
  });
  
  var rendererOptions = new JsObject.jsify({
    "draggable": true,
    "polylineOptions": polyOptions
  });
  
  var directionsService = new JsObject(google_maps['DirectionsService'], []);
  var directionsDisplay = new JsObject(google_maps['DirectionsRenderer'], [rendererOptions]);
  directionsDisplay.callMethod('setMap',[map]);
  
  var start = querySelector('#start');
  var end = querySelector('#end');
  
  start.onChange.listen((event) {
    var  request = new JsObject.jsify({
      "origin": start.value,
      "destination": end.value,
      "travelMode": google_maps['TravelMode']['WALKING']
    });
    directionsService.callMethod('route',[request,(response, status) {
      if (status == google_maps['DirectionsStatus']['OK']) {
        directionsDisplay.callMethod('setDirections',[response]);
      }
    }]);
  });
  end.onChange.listen((event) {
    var  request = new JsObject.jsify({
      "origin": start.value,
      "destination": end.value,
      "travelMode": google_maps['TravelMode']['WALKING']
    });
    directionsService.callMethod('route',[request,(response, status) {
      if (status == google_maps['DirectionsStatus']['OK']) {
        directionsDisplay.callMethod('setDirections',[response]);
      }
    }]);
  });
}