angular_google_maps #

An Angular component for Google maps

Usage #

A simple usage example:

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

main() async {
  await loadGoogleMaps("API_KEY");
  bootstrap(AppComponent);
}

<google-map
           style="width: 100%; height: 100%;"
           lat="48.8651651" 
           lng="2.3451825" 
           zoom="3" 
           (load)="onMapLoad(\$event)"></google-map>

void onMapLoaded(GMap map) {
  ...
}

Changelog #

0.0.3 #

fix load map on https

0.0.2+1 #

rename mapOptions to options

0.0.2 #

Dynamic options

0.0.1 #

Initial version, created by Stagehand

example/main.dart

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

main() async {
  await loadGoogleMaps("API_KEY");
  bootstrap(AppComponent);
}

@Component(
    selector: 'showcase-google-map',
    template: '''<google-map
        style="width: 100%; height: 100%;"
        lat="-28.024" lng="140.887" zoom="3" (load)="onMapLoad(\$event)"></google-map>
                 ''',
    directives: const [GoogleMapComponent],
    pipes: const [COMMON_PIPES])
class AppComponent {
  List<LatLng> locations = [
    new LatLng(-31.563910, 147.154312),
    new LatLng(-33.718234, 150.363181),
    new LatLng(-33.727111, 150.371124),
    new LatLng(-33.848588, 151.209834),
    new LatLng(-33.851702, 151.216968),
    new LatLng(-34.671264, 150.863657),
    new LatLng(-35.304724, 148.662905),
    new LatLng(-36.817685, 175.699196),
    new LatLng(-36.828611, 175.790222),
    new LatLng(-37.750000, 145.116667),
    new LatLng(-37.759859, 145.128708),
    new LatLng(-37.765015, 145.133858),
    new LatLng(-37.770104, 145.143299),
    new LatLng(-37.773700, 145.145187),
    new LatLng(-37.774785, 145.137978),
    new LatLng(-37.819616, 144.968119),
    new LatLng(-38.330766, 144.695692),
    new LatLng(-39.927193, 175.053218),
    new LatLng(-41.330162, 174.865694),
    new LatLng(-42.734358, 147.439506),
    new LatLng(-42.734358, 147.501315),
    new LatLng(-42.735258, 147.438000),
    new LatLng(-43.999792, 170.463352)
  ];

  void onMapLoad(GMap map) {
    Iterable<Marker> markers = locations
        .map((l) => new Marker(new MarkerOptions()
          ..position = l
          ..map = map))
        .toList();
    loadMarkerClusterer().then((_) {
      new MarkerClusterer(map, markers);
    });
  }
}

Use this package as a library

1. Depend on it

Add this to your package's pubspec.yaml file:


dependencies:
  angular_google_maps: ^0.0.3

2. Install it

You can install packages from the command line:

with pub:


$ pub get

Alternatively, your editor might support pub get. Check the docs for your editor to learn more.

3. Import it

Now in your Dart code, you can use:


import 'package:angular_google_maps/angular_google_maps.dart';

Popularity: Describes how popular the package is relative to other packages. [more]	0
Health: Code health derived from static analysis. [more]	--
Maintenance: Reflects how tidy and up-to-date the package is. [more]	--
Overall: Weighted score of the above. [more]	0

Learn more about scoring.

The package version is not analyzed, because it does not support Dart 2. Until this is resolved, the package will receive a health and maintenance score of 0.

Analysis issues and suggestions

Support Dart 2 in pubspec.yaml.

The SDK constraint in pubspec.yaml doesn't allow the Dart 2.0.0 release. For information about upgrading it to be Dart 2 compatible, please see https://dart.dev/dart-2#migration.

Dependencies

Package	Constraint	Resolved	Available
Direct dependencies
Dart SDK	>=1.20.1 <2.0.0

Dart pub