Web Programming examples

Google Maps,AngularJS

Google Maps with Dart Styled Maps

  • Dart : 1.8.5
  • 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>
<link rel="stylesheet" href="css/bootstrap.min.css">
<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/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;

void main() {
  final google_maps = context['google']['maps'];
  var all = new JsObject.jsify({
    "featureType": "all",
    "stylers": [{"saturation": -80}]
  });
  var water = new JsObject.jsify({
    "featureType": "water",
    "elementType": "geometry",
    "stylers": [{"hue": "#00ffee" },{"saturation": 90}]
  });
  var park = new JsObject.jsify({
    "featureType": "poi.park",
    "elementType": "geometry",
    "stylers": [{"hue": "#00ff00" },{"saturation": 90}]
  });
  var park_label = new JsObject.jsify({
    "featureType": "poi.park",
    "elementType": "labels",
    "stylers": [{"hue": "#ff0000" },{"saturation": 90}]
  });
  var styles = new JsObject.jsify([all,water,park,park_label]);
  var stylesOptions = new JsObject.jsify({
    "name": "Styled Map"
  });
  var styledMap = new JsObject(google_maps['StyledMapType'], [styles, stylesOptions]);
  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,
    "mapTypeControlOptions": {
      "mapTypeIds": [mapTypeId, 'map_style']
    }
  });

  var map = new JsObject(google_maps['Map'], [querySelector('#map-canvas'), mapOptions]);
  map["mapTypes"].callMethod('set',['map_style',styledMap]);
  map.callMethod('setMapTypeId',['map_style']);
}