Using Dart, Web_UI and Google Maps in a slightly more complicated way

Question

I'm trying to integrate the google maps library with a dart app I've been trying to build that also uses web_ui, all that I'm getting is a lot of very frustrating errors. I downloaded the examples at the dart google maps example on github and those work just fine.

However when I try to pull it together in a bit more of a "real" app nothing works. Here are the errors I'm getting:

Breaking on exception: ReferenceError: ReceivePortSync is not defined

Uncaught ReferenceError: ReceivePortSync is not defined
  ProxiedObjectTable (:54:21)
   (:195:28)
   (:567:3)
Breaking on exception: The null object does not have a method 'callSync'.

Exception: The null object does not have a method 'callSync'.

NoSuchMethodError : method not found: 'callSync'
Receiver: null
Arguments: [GrowableObjectArray len:0]
  Object.noSuchMethod (dart:core-patch/object_patch.dart:20:25)
  _enterScope (package:js/js.dart:756:35)
  scoped (package:js/js.dart:745:26)
  AlertDetailsComponent.renderMap (http://127.0.0.1:3030/Users/ao85407/Development/Dart/BDProjects/adminConsoleV2/web/out/AlertDetails.dart:381:14)
  AlertDetailsComponent.loadAlertDetailsData (http://127.0.0.1:3030/Users/ao85407/Development/Dart/BDProjects/adminConsoleV2/web/out/AlertDetails.dart:321:25)
  AlertsBodyComponent.viewAlertDetails (http://127.0.0.1:3030/Users/ao85407/Development/Dart/BDProjects/adminConsoleV2/web/out/AlertsBody.dart:232:36)
  AlertsBodyComponent.created_autogenerated.<anonymous closure>.<anonymous closure> (http://127.0.0.1:3030/Users/ao85407/Development/Dart/BDProjects/adminConsoleV2/web/out/AlertsBody.dart:146:60)
  Template.listen.<anonymous closure> (package:web_ui/templating.dart:426:53)
  _enterScope (package:js/js.dart:756:35)
  scoped (package:js/js.dart:745:26)
Exception: The null object does not have a method 'callSync'.

NoSuchMethodError : method not found: 'callSync'
Receiver: null
Arguments: [GrowableObjectArray len:0]
  Object.noSuchMethod (dart:core-patch/object_patch.dart:20:25)
  _enterScope (package:js/js.dart:756:35)
  scoped (package:js/js.dart:745:26)
  AlertDetailsComponent.renderMap (http://127.0.0.1:3030/Users/ao85407/Development/Dart/BDProjects/adminConsoleV2/web/out/AlertDetails.dart:381:14)
  AlertDetailsComponent.loadAlertDetailsData (http://127.0.0.1:3030/Users/ao85407/Development/Dart/BDProjects/adminConsoleV2/web/out/AlertDetails.dart:321:25)
  AlertsBodyComponent.viewAlertDetails (http://127.0.0.1:3030/Users/ao85407/Development/Dart/BDProjects/adminConsoleV2/web/out/AlertsBody.dart:232:36)
  AlertsBodyComponent.created_autogenerated.<anonymous closure>.<anonymous closure> (http://127.0.0.1:3030/Users/ao85407/Development/Dart/BDProjects/adminConsoleV2/web/out/AlertsBody.dart:146:60)
  Template.listen.<anonymous closure> (package:web_ui/templating.dart:426:53)
  _enterScope (package:js/js.dart:756:35)
  scoped (package:js/js.dart:745:26)
Failed to load resource: the server responded with a status of 404 (Not Found)
  http://127.0.0.1:3030/Users/ao85407/Development/Dart/BDProjects/adminConsoleV2/web/out/js/jquery.js
Failed to load resource: the server responded with a status of 404 (Not Found)
  http://127.0.0.1:3030/Users/ao85407/Development/Dart/BDProjects/adminConsoleV2/web/out/js/bootstrap.js

What is happening in the code is that when the component is rendered I get handle on a custom "Alert" object and use it to build a map with this function:

  Object renderMap(Alert alert)
  {
    final lat = double.parse(alert.latitude);
    final lng = double.parse(alert.longitude);

    final mapOptions = new MapOptions()
              ..zoom = 14
              ..center = new LatLng(lat, lng)
              ..mapTypeId = MapTypeId.ROADMAP;

    final map = new GMap(query("#map-canvas"), mapOptions);
    js.retain(map);

    //clever troubleshooting/debugging methods
    map.onZoomChanged.listen((ignored)
        {
          print ('zoom: ${map.zoom}');
        });
    return map;
  }

The crash happens when I try to create the MapOptions and nothing I've tried works. I'm guessing that it has to do with the page lifecycle and when libraries are being loaded since I'm a few pages away from the main method of my application dart file.

Any suggestions would be great!

Thanks!

Answer 1

You have to use the following Js script on your page to use js-interop :

<script src="packages/browser/interop.js"></script>

See BREAKING CHANGE: js-interop will require extra script in html.