Web Programming examples

Google Maps,AngularJS

Google Maps with Dart Fusion Table

  • Dart : 1.8.3
  • Bootstrap : 3.2.0
  • include file
  • dart.js,interop.js
<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/fusion/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'];
  
  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]);
  
  var fusionOptions = new JsObject.jsify({
    "query": {
      "select": '\'Location\'',
      "from": '1Gzxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx'
    },
    "styles": [{
      "markerOptions": {
        "iconName": "large_green"
      }
    }, {
      "where": "type = '公園'",
      "markerOptions": {
        "iconName": "parks"
      }
    }, {
      "where": "type = 'サイクリング'",
      "markerOptions": {
        "iconName": "cycling"
      }
    }]
  });
  var layer = new JsObject(google_maps['FusionTablesLayer'], [fusionOptions]);
  layer.callMethod('setMap', [map]);
  
}