<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 text(ex.cafe)</label>
<input type="text" class="form-control" id="place_text">
</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) {
var request = new JsObject.jsify({
"reference": place['reference']
});
var service1 = new JsObject(google_maps['places']['PlacesService'], [map]);
service1.callMethod('getDetails',[request, (place, status) {
if (status == google_maps['places']['PlacesServiceStatus']['OK']) {
var content = place['name'] + "
" ;
if (place['vicinity'] != null) {
content += place['vicinity'] + "
" ;
}
if (place['formatted_phone_number'] != null) {
content += place['formatted_phone_number'] + "
" ;
}
if (place['website'] != null) {
content += place['website'] + "
";
}
// content += place['html_attributions'].toString() + "
";
content += place['types'].toString() ;
infowindow.callMethod('setContent',[content]);
}
}]);
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_text = querySelector('#place_text');
var place_radius = querySelector('#place_radius');
var request = new JsObject.jsify({
'location': center,
'radius': place_radius.value,
'query': place_text.value
});
service.callMethod('textSearch',[request, (results, status, page) {
if (status == google_maps['places']['PlacesServiceStatus']['OK']) {
for (var i = 0; i