<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>
    <div id="directionsPanel" style="float:right;width:30%;height 100%">
      <p>Total Distance: <span id="total"></span></p>
    </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;

computeTotalDistance(result) {
  var total = 0;
  var myroute = result["routes"][0];
  var summaryPanel = querySelector('#directions_panel');
  summaryPanel.innerHtml = '';
  for (var i = 0; i < myroute["legs"].length; i++) {
    total += myroute["legs"][i]["distance"]["value"];
    var routeSegment = i + 1;
    summaryPanel.innerHtml += '<b>Route Segment: ' + routeSegment.toString() + '</b><br>';
    summaryPanel.innerHtml += myroute["legs"][i]["start_address"] + ' to ';
    summaryPanel.innerHtml += myroute["legs"][i]["end_address"] + '<br>';
    summaryPanel.innerHtml += myroute["legs"][i]["distance"]["text"] + '<br><br>';
  }
  total = total / 1000.0;
  print(total);
  var totalPanel = querySelector('#total');
  totalPanel.innerHtml = total.toString() + ' km';
}
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]);
  //directionsDisplay.callMethod('setPanel',[querySelector('#directionsPanel')]);
  
  google_maps['event'].callMethod('addListener', [directionsDisplay, 'directions_changed', () {
    var direction = directionsDisplay.callMethod('getDirections',[]);
    computeTotalDistance(direction);
  }]);
  
  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) {
      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>';
        }
      }
    }]);
  });
}