CODEWITHSUNDEEP
dartangular-dart
richard
richard

Reputation: 3309

Using GMap with Dart Angular

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

Upvotes: 0

Views: 188

Answers (2)

richard
richard

Reputation: 3309

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

Upvotes: 0

Alexandre Ardhuin
Alexandre Ardhuin

Reputation: 76343

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

Upvotes: 1

Related Questions