複数のビューangular.dart
で単一ページのアプリを作成しようとしていますが、ルーティング先のビューにGoogle マップをロードする実際の例が見つかりません。
google_maps
パッケージを使用しています。div
マップを含む要素がメイン ページで定義されている場合は問題なく動作しindex.html
ますが、マップ div がビューで定義されている場合は例外がスローされます。
'TypeError: Cannot read property 'offsetWidth' of null'
これは、ディレクティブ クラスが読み込まれるまでにビューがレンダリングされていないことを意味していると思います。ビューにマップをロードするにはどうすればよいですか?
ルーターは次のとおりです。
@InjectableService()
class DefaultRouteInitializer implements RouteInitializer {
init(Router router, ViewFactory view) {
router.root
..addRoute(
name: 'city',
path: '/city',
enter: view('view/city_view.html'));
}
}
そしてビューhtml:
<div city-ctrl>
<div class="row">
<div class="col-md-12">
<div id="city_map_canvas" style="width: 100px; height: 100px;"> </div>
</div>
</div>
</div>
そして、実際のマップの作成に問題がある Directive クラス:
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);
}
}