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 M

Answer 1

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:

  

  ...some code 
   

  ...some code
  

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() {


  }
}