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


  }
}