Web Programming examples

Google Maps,AngularJS

Google Maps with Dart Reverse Geocoding (Address Lookup)

  • 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>
<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/pos-addr/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,window;
import 'dart:js' show context, JsObject;

final google_maps = context['google']['maps'];

addLatLng(map,event) {
  var infowindow = new JsObject(google_maps["InfoWindow"],[]);
  var geocoder = new JsObject(google_maps['Geocoder'], []);
  
  double lat = event["latLng"].callMethod('lat',[]);
  double lng = event["latLng"].callMethod('lng',[]);
  var latlng = new JsObject(google_maps['LatLng'], [lat, lng]);
  var geoOptions = new JsObject.jsify({
    "location": latlng
  });
  
  geocoder.callMethod("geocode",[geoOptions, (results, status) {
    if (status == google_maps["GeocoderStatus"]["OK"]) {
      if (results[0] != "") {
        var markerOptions = new JsObject.jsify({
          "position": latlng,
          "map": map
        });
        var marker = new JsObject(google_maps["Marker"],[markerOptions]);
        infowindow.callMethod("setContent",[results[0]["formatted_address"]]);
        infowindow.callMethod("open",[map, marker]);
      } else {
        window.alert('No results found');
      }
    } else {
      window.alert('Geocoder failed due to: ' + status);
    }
  }]);
}
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
  });
  var map = new JsObject(google_maps['Map'], [querySelector('#map-canvas'), mapOptions]);
  
  google_maps['event'].callMethod('addListener', [map, 'click', (event) {
    addLatLng(map,event);
  }]);
}