Using GMap with Dart Angular

Question

I would like to include google maps in a simple Angular Dart project

The standard way of adding a google map to a web page is to have the following div defined in your html

<div id="map_canvas"></div>

And then include the following somewhere in you code

GMap  map = new GMap( querySelector("#map_canvas"), mapOptions);

All standard stuff but it does not follow the 'angular pattern' where a field on a controller is linked to the html via a ng attribute.

As far as I can see you have to have the html element before creating the GMap object so the element would have to somehow be injected into the controller???

Can anyone please tell me how to do this?

Thanks Richard

Answer 1

You can create a component like:

import 'dart:html';

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

@Component(selector: 'google-map', template: "<div id='map_canvas'></div>")
class GMapComponent implements ShadowRootAware {
  GMapComponent();

  @override
  void onShadowRoot(ShadowRoot shadowRoot) {
    final mapCanvas = shadowRoot.getElementById('map_canvas');
    GMap  map = new GMap(mapCanvas, mapOptions);
  }
}

Answer 2

I eventually changed it to use the normal component pattern which now works.

library gmapcomponent;

import 'dart:html';

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

@Component(selector: 'google-map',
  templateUrl: '/packages/lightning/gmapcomponent.html', 
  cssUrl: '/packages/lightning/gmapcomponent.css',
  publishAs: 'gmap')
class GMapComponent implements ShadowRootAware {

  @override
  void onShadowRoot(ShadowRoot shadowRoot) {
    print( "in onShadowRoot");
    final mapCanvas = shadowRoot.getElementById('map_canvas');

    MapOptions mapOptions = new MapOptions()
          ..zoom = 4
          ..center = new LatLng(-34.397, 150.644)
          ..mapTypeId = MapTypeId.ROADMAP;
    GMap  map = new GMap(mapCanvas, mapOptions);
  }
}

The html is then simply

<div id='map_canvas'></div>

and the css is

#map_canvas { height: 100%;}