<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key=・・・・&sensor=false&libraries=places"></script>
<link rel="stylesheet" href="css/bootstrap.min.css">
<style type="text/css">
  #map-canvas { height: 400px }
</style>
<div class="row">
  <div class="col-sm-8">
    <div id="map-canvas"></div>
  </div>
  <div class="col-sm-4">
    <div class="form-group">
      <label class="control-label">Place types(ex.finance)</label>
      <input type="text" class="form-control" id="place_types">
    </div>
    <div class="form-group">
      <label class="control-label">radius(meters)</label>
      <input type="text" class="form-control" id="place_radius">
    </div>
    <button id="place_search" type="submit" class="btn btn-primary">Submit</button>
    <button id="clear_map" type="submit" class="btn btn-danger">Clear Map</button>
  </div>
</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 map;
var infowindow;
var markers = new List();

createMarker(place) {
  var placeLoc = place['geometry']['location'];
  var markerOptions = new JsObject.jsify({
    "map": map,
    "position": placeLoc
  });
  var marker = new JsObject(google_maps['Marker'], [markerOptions]);
  markers.add(marker);
  google_maps['event'].callMethod('addListener', [marker, 'click', (event) {
    infowindow.callMethod('setContent',[place['name']]);
    infowindow.callMethod('open',[map,marker]);
  }]);
}

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
  });
  map = new JsObject(google_maps['Map'], [querySelector('#map-canvas'), mapOptions]);
  infowindow = new JsObject(google_maps['InfoWindow'], []);
  
  var service = new JsObject(google_maps['places']['PlacesService'], [map]);
  var placeSearch = querySelector('#place_search');
  placeSearch.onClick.listen((event) {
    var place_types = querySelector('#place_types');
    var place_radius = querySelector('#place_radius');
    var request = new JsObject.jsify({
      'location': center,
      'radius': place_radius.value,
      'types': [place_types.value]
    }); 
    service.callMethod('nearbySearch',[request, (results, status,page) {
      if (status == google_maps['places']['PlacesServiceStatus']['OK']) {
        for (var i = 0; i < results['length']; i++) {
          createMarker(results[i]);
        }
      }
    }]);
  });
  
  var clearMap = querySelector('#clear_map');
  clearMap.onClick.listen((event) {
    for(var marker in markers) {
      marker.callMethod('setMap',[null]);
    }
  });
}