<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key=・・・・&sensor=false"></script>
<link rel="stylesheet" href="css/bootstrap.min.css">
<style type="text/css">
  #map-canvas { height: 400px }
  .controls {
    margin-top: 16px;
    border: 1px solid transparent;
    border-radius: 2px 0 0 2px;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    height: 32px;
    outline: none;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
  }
  #pac-input {
    background-color: #fff;
    padding: 0 11px 0 13px;
    width: 300px;
    font-family: Roboto;
    font-size: 15px;
    font-weight: 300;
    text-overflow: ellipsis;
  }

  #pac-input:focus {
    border-color: #4d90fe;
    margin-left: -1px;
    padding-left: 14px;  /* Regular padding-left + 1. */
    width: 301px;
  }

  .pac-container {
    font-family: Roboto;
  }

  #type-selector {
    color: #fff;
    background-color: #4d90fe;
    padding: 5px 11px 0px 11px;
  }

  #type-selector label {
    font-family: Roboto;
    font-size: 13px;
    font-weight: 300;
  }
</style>
<input id="pac-input" class="controls" type="text"
    placeholder="Enter a location">
<div id="type-selector" class="controls">
  <input type="radio" name="type" id="changetype-all" checked="checked">
  <label for="changetype-all">All</label>

  <input type="radio" name="type" id="changetype-establishment">
  <label for="changetype-establishment">Establishments</label>

  <input type="radio" name="type" id="changetype-geocode">
  <label for="changetype-geocode">Geocodes</label>
</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;
import 'dart:js' show context, JsObject;
final google_maps = context['google']['maps'];
var autocomplete;

setupClickListener(id, types) {
  var radioButton = querySelector(id);
  var j_types = new JsObject.jsify(types);
  google_maps['event'].callMethod('addDomListener', [radioButton, 'click', (event) {
    autocomplete.callMethod('setTypes',[j_types]);
  }]);
}

void main() {
  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 input = querySelector('#pac-input');
  var types = querySelector('#type-selector');
  
  map['controls'][google_maps['ControlPosition']['TOP_LEFT']].callMethod('push',[input]);
  map['controls'][google_maps['ControlPosition']['TOP_LEFT']].callMethod('push',[types]);
  
  var bound1 = new JsObject(google_maps['LatLng'], [35.6909, 139.7415]);
  var bound2 = new JsObject(google_maps['LatLng'], [35.6717, 139.7809]);
  var defaultBounds = new JsObject(google_maps['LatLngBounds'], [bound1,bound2]);
  var boundsOptions = new JsObject.jsify({
    "bounds": defaultBounds,
    "types": ['establishment']
  });
  autocomplete = new JsObject(google_maps['places']['Autocomplete'], [input,boundsOptions]);
  autocomplete.callMethod('bindTo',['bounds', map]);
  
  var infowindow = new JsObject(google_maps['InfoWindow'], []);
  var markerOptions = new JsObject.jsify({
    "map": map
  });
  var marker = new JsObject(google_maps['Marker'], [markerOptions]);
  google_maps['event'].callMethod('addListener', [autocomplete, 'place_changed', () {
    infowindow.callMethod('close',[]);
    marker.callMethod('setVisible',[false]);
    var place = autocomplete.callMethod('getPlace',[]);
    if (place['geometry'] == null) {
      return;
    }
    if (place['geometry']['viewport'] != null) {
      map.callMethod('fitBounds',[place['geometry']['viewport']]);
    } else {
      map.callMethod('setCenter',[place['geometry']['location']]);
      map.callMethod('setZoom',[17]);
    }
    var iconOptions = new JsObject.jsify({
      "url": place['icon'],
      "size": new JsObject(google_maps['Size'], [71, 71]),
      "origin": new JsObject(google_maps['Point'], [0,0]),
      "anchor": new JsObject(google_maps['Point'], [17,34]),
      "scaledSize": new JsObject(google_maps['Size'], [35,35])
    });
    marker.callMethod('setIcon',[iconOptions]);
    marker.callMethod('setPosition',[place['geometry']['location']]);
    marker.callMethod('setVisible',[true]);
    var address = '';
    if (place['address_components'] != null) {
      for (int i = 0; i < place['address_components'].length; i++) {
        address += place['address_components'][i]['short_name'].isNotEmpty?
            place['address_components'][i]['short_name'] + ' ':'';
      }
    }
    infowindow.callMethod('setContent',['
' + place['name'] + '
' + address]);
    infowindow.callMethod('open',[map,marker]);
  }]);
  
  setupClickListener('#changetype-all', []);
  setupClickListener('#changetype-establishment', ['establishment']);
  setupClickListener('#changetype-geocode', ['geocode']);
}