loading google map in angular.dart view (ng-view)

Question

I am trying to create a single page app in angular.dart with multiple views, but I cant find a working example of loading up a Google Map in a view being routed into.

I am using the google_maps package. It works out fine when the div element to contain the map is defined in the main index.html page, but an exception is thrown when the map div is defined in the view:

'TypeError: Cannot read property 'offsetWidth' of null'

I suppose this means the view has not been rendered by the time the directive class is loading. How should one load a Map in a view?

Here is the router:

@InjectableService()
class DefaultRouteInitializer implements RouteInitializer {

  init(Router router, ViewFactory view) {
  router.root
    ..addRoute(
        name: 'city',
        path: '/city',
        enter: view('view/city_view.html'));
  }
}

And the view html:

<div city-ctrl>
  <div class="row">
    <div class="col-md-12">
      <div id="city_map_canvas" style="width: 100px; height: 100px;">&nbsp;</div>
    </div>
  </div>
</div>

And the Directive class having issues creating the actual map:

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

@NgDirective(
  selector: '[city-ctrl]'
)
class CityController {

  CityController() {
    final mapOptions = new MapOptions()
    ..zoom = 8
    ..center = new LatLng(-34.397, 150.644)
    ..mapTypeId = MapTypeId.ROADMAP
    ;
    final map = new GMap(querySelector("#city_map_canvas"), mapOptions);
  }

}

Answer 1

I managed to get this working by letting the city-ctrl directive implement NgAttachAware interface method attach(), and initiate the Maps from there. The constructor was obviously the wrong place for that. The following worked out:

@NgDirective(
  selector: '[city-ctrl]'
)
class CityController implements NgAttachAware {

  CityController() {
  }

  attach() {    
    final mapOptions = new MapOptions()
    ..zoom = 8
    ..center = new LatLng(-34.397, 150.644)
    ..mapTypeId = MapTypeId.ROADMAP
    ;
    final map = new GMap(querySelector("#city_map_canvas"), mapOptions);
  }

}