Google Maps and DART Google Maps and DART dart dart

Google Maps and DART


You can now use google_maps package available on pub. This library allows you to use Google Maps JavaScript API from dart scripts.

Simply add the dependency to your pubspec.yaml

dependencies:  google_maps: ">=1.0.1 <2.0.0"

Include the Maps API JavaScript using a <script> tag.

<script src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>

Then you can use Google Maps from dart scripts. Here's a simple exemple :

import 'dart:html';import 'package:google_maps/google_maps.dart';void main() {  final mapOptions = new MapOptions()    ..zoom = 8    ..center = new LatLng(-34.397, 150.644)    ..mapTypeId = MapTypeId.ROADMAP    ;  final map = new GMap(query("#map_canvas"), mapOptions);}


Currently you need to use postMessage from Dart if you want to communicate with JavaScript (this will eventually change). So for now you'll need to add some JavaScript code to your app that mediates messages to and from Google maps JS API and Dart:

function googleMapsCallback(s) {    window.postMessage(JSON.stringify(s), '*'); } 

And then in your Dart code:

class GoogleMap {   GoogleMap() {     window.on.message.add(received, false);   }  received(MessageEvent e) {     var data = JSON.parse(e.data);     // do stuff with google maps data   } } 

Alternativly you can use Google Maps REST API directly from Dart using XMLHttpREquest


Dart now has a JavaScript interoperability library: http://www.dartlang.org/articles/js-dart-interop/

One of the examples on that page is how to interoperate with Google Apps.