Web Programming examples

Google Maps,AngularJS

Google Maps with Dart Directly accessing Street View data

  • 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 }
  #pano { height: 400px }

</style>
<div class="row">
  <div class="col-sm-6">
    <div id="map-canvas"></div>
  </div>
  <div class="col-sm-6">
    <div id="pano"></div>
  </div>
</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,window;
import 'dart:js' show context, JsObject;

final google_maps = context['google']['maps'];
var map;
var panorama;
var sv = new JsObject(google_maps['StreetViewService'], []);

processSVData(data, status) {
  if (status == google_maps["StreetViewStatus"]["OK"]) {
    var markerOptions = new JsObject.jsify({
      "position": data["location"]["latLng"],
      "map": map,
      "title": data["location"]["description"]
    });
    var marker = new JsObject(google_maps['Marker'], [markerOptions]);

    panorama.callMethod('setPano',[data["location"]["pano"]]);
    var povOptions = new JsObject.jsify({
      "heading": 270,
      "pitch": 0
    });
    panorama.callMethod('setPov',[povOptions]);
    panorama.callMethod('setVisible',[true]);
    
    google_maps['event'].callMethod('addListener', [marker, 'click', (event) {
      var markerPanoID = data["location"]["pano"];
      panorama.callMethod('setPano',[markerPanoID]);
      panorama.callMethod('setPov',[povOptions]);
      panorama.callMethod('setVisible',[true]);
    }]);
  } else {
    window.alert('Street View data not found for this location.');
  }
}

void main() {
  final google_maps = context['google']['maps'];
  
  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
  });
  map = new JsObject(google_maps['Map'], [querySelector('#map-canvas'), mapOptions]);
  
  var panoramaOptions = new JsObject.jsify({
      "position": center,
      "pov": {
         "heading": 30,
         "pitch": 5,
          "zoom": 2
       }
  });
  panorama = new JsObject(google_maps['StreetViewPanorama'], [querySelector('#pano'), panoramaOptions]);
  google_maps['event'].callMethod('addListener', [map, 'click', (event) {
    sv.callMethod('getPanoramaByLocation',[event["latLng"],50,processSVData]);
  }]);
}

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.