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);
  }

}

Answer 2

I tried the solution proposed by Günter Zöchbauer in my @component .but It still not works(Maybe I made some mistake),after that I noticed that the my gogole map is in the shadwo dom.so I can implement the ShadowRootAware class and it's on onShadowRoot method to show google map .because onShadowRoot method will be called untill the html elements are load. here is the component html:

  <div id="addculture">
  ...some code 
   <div id="map-canvas"></div>
  ...some code
  </div>

and here is the component dart file:

  library culture_component;
import 'dart:async';
import 'package:angular/angular.dart';

import '../service/culture_story.dart';
import '../service/culture.dart';
import '../service/query_service.dart';
import 'dart:html';
import 'dart:js' show context, JsObject;
import 'package:google_maps/google_maps.dart';

@Component(selector: 'add-culture', templateUrl: '../lib/component/add_culture_component.html', cssUrl: '../lib/component/add_culture_component.css', publishAs: 'addCultureCmp')
class AddCultureComponent implements AttachAware, ShadowRootAware {



  AddCultureComponent(RouteProvider routeProvider, this.queryService, this._http) {
   //todo 

  }

  @override
  onShadowRoot(ShadowRoot shadowRoot) {
    final mapOptions = new MapOptions()
      ..zoom = 8
      ..center = new LatLng(-34.397, 150.644)
      ..mapTypeId = MapTypeId.ROADMAP;
    var mapDiv = shadowRoot.querySelector("#map-canvas");
    final map = new GMap(mapDiv, mapOptions);
  }

  @override
  attach() {


  }
}