dart using google maps Class 'GElement' has no instance method '[]'

Question

I'm trying to use google maps with dart, according to this web site:

https://pub.dartlang.org/packages/google_maps

And i'm getting this error:

Exception: Class 'GElement' has no instance method '[]'.
NoSuchMethodError: method not found: '[]'
Receiver: Instance of 'GElement'
Arguments: ["maps"] (package:google_maps/src/generated/core/base/lat_lng.dart:24)

My source code for .dart is:

import 'dart:html';
import 'package:polymer/polymer.dart';
import 'package:google_maps/google_maps.dart';

@CustomTag('rifidi-map')
class RifidiMap extends PolymerElement {

  RifidiMap.created() : super.created()  {

  main();

  }

  void main() {
        final mapOptions = new MapOptions()
          ..zoom = 8
          ..center = new LatLng(-34.397, 150.644)
          ..mapTypeId = MapTypeId.ROADMAP

          ;

        final map = new GMap(querySelector("#map_canvas"), mapOptions);

  }

}

The .HTML file has the import to use the script:

http://maps.googleapis.com/maps/api/js?sensor=false

The versions I'm currently using are:

Dart editor: versión 1.8.3
gogle_maps dart dependency: >=2.0.7 <3.0.0
polymer dart dependency: >=0.15.0 <0.16.0

Does anyone have a working workspace that can share with me to see how to implement a google maps polymer component using dart? Thanks

Did you confirm that the file is actually getting pulled down? http://maps.googleapis.com/maps/api/js?sensor=false — Antiga
Consider this is potentially related: stackoverflow.com/questions/24984742/… — Antiga
i think the issue has to do with the right place where this import maps.googleapis.com/maps/api/js?sensor=false should be placed — Alejandro Tobón
Where is it now? Just add it in a script tag at the top of your index.html to confirm it's even the problem. — Antiga
It is inside index.html, and if i remove that entry, i get the same error, it is like if it were not read from there — Alejandro Tobón

Günter Zöchbauer Günter Zöchbauer · Accepted Answer · 2014-12-30T16:38:29

You shouldn't do anything but local variable initialization in a Polymer elements constructor. Use the lifecycle methods instead.

import 'dart:html';
import 'package:polymer/polymer.dart';
import 'package:google_maps/google_maps.dart';

@CustomTag('rifidi-map')
class RifidiMap extends PolymerElement {

  RifidiMap.created() : super.created();

  @override
  void ready() {
    final mapOptions = new MapOptions()
        ..zoom = 8
        ..center = new LatLng(-34.397, 150.644)
        ..mapTypeId = MapTypeId.ROADMAP;

        final map = new GMap(querySelector("#map_canvas"), mapOptions);
  }
}

I don't know the google_maps package. It might still not work.

dart using google maps Class 'GElement' has no instance method '[]'

1 Answers