Web Programming examples

Google Maps,AngularJS

Google Maps with Dart Makers click Window

  • 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/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,
     'icon': 'http://maps.google.co.jp/mapfiles/ms/icons/pink.png',
     'title': 'Sample1',
     'info':'<h2>InfoWindow</h2>' +
            '<p>This is a <b>Sample1</b> marker inforwindow content</p>'
    },
    {'latitude': 35.678354, 
     'longitude': 139.761028,
     'icon': 'http://maps.google.co.jp/mapfiles/ms/icons/pink.png',
     'title': 'Sample2',
     'info': '<h2>InfoWindow</h2>' +
             '<p>This is a <b>Sample2</b> marker inforwindow content</p>'
    },
    {'latitude': 35.682032, 
     'longitude': 139.762294,
     'icon': 'http://maps.google.co.jp/mapfiles/ms/icons/pink.png',
     'title': 'Sample3',
     'info': '<h2>InfoWindow</h2>' +
             '<p>This is a <b>Sample3</b> marker inforwindow content</p>'
    }
  ];

  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,
      "title": markers[i]['title'],
      "icon": markers[i]['icon']
    });
    var marker = new JsObject(google_maps['Marker'], [markerOptions]);
    var infoWindowOptions = new JsObject.jsify({
        "content": markers[i]['info']
    });
    var infowindow = new JsObject(google_maps['InfoWindow'], [infoWindowOptions]);
    google_maps['event'].callMethod('addListener', [marker, 'click', (event) {
      infowindow.callMethod('open',[map,marker]);
    }]);
  };