<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"></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'];
List markers = [
{'latitude': 35.681382,
'longitude': 139.766084
},
{'latitude': 35.678354,
'longitude': 139.761028
},
{'latitude': 35.682032,
'longitude': 139.762294
}
];
var center = new JsObject(google_maps['LatLng'], [35.681382, 139.766084]);
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]);
for (int i = 0; i < markers.length; i++) {
var myLatlng = new JsObject(google_maps['LatLng'], [markers[i]['latitude'], markers[i]['longitude']]);
var markerOptions = new JsObject.jsify({
"position": myLatlng,
"map": map
});
var marker = new JsObject(google_maps['Marker'], [markerOptions]);
google_maps['event'].callMethod('addListener', [marker, 'dblclick', (event) {
map.callMethod('setCenter',[myLatlng]);
map.callMethod('setZoom',[17]);
}]);
};
}