<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key=・・・・&sensor=false"></script>
<style type="text/css">
  #map-canvas { height: 400px }
</style>
    <div id="map-canvas" style="float:left;width:70%;"></div>
    <div id="control_panel" style="float:right;width:30%;text-align:left;padding-top:20px">
    <div style="margin:20px;border-width:2px;">
    <b>Start:</b>
    <select id="start">
      <option value="35.6813,139.7661">東京駅</option>
      <option value="35.6842,139.7629">大手町駅</option>
    </select>
    <br>
    <b>Waypoints:</b> <br>
    <i>(Ctrl-Click for multiple selection)</i> <br>
    <select multiple id="waypoints">
      <option value="35.6857,139.7612">大手門</input>
      <option value="35.6795,139.7577">二重橋前</input>
      <option value="日本, 東京都港区芝公園４-２-８">東京タワー</input>
      <option value="日本, 東京都中央区浜離宮庭園１-1">浜離宮恩賜庭園</input>
    </select>
    <br>
    <b>End:</b>
    <select id="end">
      <option value="35.6813,139.7661">東京駅</option>
      <option value="35.6842,139.7629">大手町駅</option>
    </select>
    <br>
      <input type="submit" id="calcroute">
    </div>
    <div id="directions_panel" style="margin:20px;background-color:#FFEE77;"></div>
    </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 directionsService = new JsObject(google_maps['DirectionsService'], []);
  var directionsDisplay = new JsObject(google_maps['DirectionsRenderer'], []);
  directionsDisplay.callMethod('setMap',[map]);
  
  var calcroute = querySelector('#calcroute');
  calcroute.onClick.listen((event) {
    var start = querySelector('#start');
    var end = querySelector('#end');
    List waypts = new List();
    var checkboxArray = querySelector('#waypoints');
    checkboxArray.children.forEach((el) {
      print(el.selected);
      if (el.selected == true) {
        var waypt = new JsObject.jsify({
          "location": el.value,
          "stopover": true
        });
        waypts.add(waypt);
      }
    });
    var  request = new JsObject.jsify({
      "origin": start.value,
      "destination": end.value,
      "waypoints": waypts,
      "optimizeWaypoints": true,
      "travelMode": google_maps['TravelMode']['WALKING']
    });
    directionsService.callMethod('route',[request,(response, status) {
      if (status == google_maps['DirectionsStatus']['OK']) {
        directionsDisplay.callMethod('setDirections',[response]);
        var route = response["routes"][0];
        var summaryPanel = querySelector('#directions_panel');
        summaryPanel.innerHtml = '';
        for (int i = 0; i < route["legs"].length; i++) {
          var routeSegment = i + 1;
          summaryPanel.innerHtml += '<b>Route Segment: ' + routeSegment.toString() + '</b><br>';
          summaryPanel.innerHtml += route["legs"][i]["start_address"] + ' to ';
          summaryPanel.innerHtml += route["legs"][i]["end_address"] + '<br>';
          summaryPanel.innerHtml += route["legs"][i]["distance"]["text"] + '<br><br>';
        }
      }
    }]);
  });
}