1 | import {Injectable, NgZone} from '@angular/core';
|
2 | import {Observable} from 'rxjs/Observable';
|
3 | import {Observer} from 'rxjs/Observer';
|
4 |
|
5 | import * as mapTypes from './google-maps-types';
|
6 | import {Polyline} from './google-maps-types';
|
7 | import {PolylineOptions} from './google-maps-types';
|
8 | import {MapsAPILoader} from './maps-api-loader/maps-api-loader';
|
9 |
|
10 |
|
11 | declare var google: any;
|
12 |
|
13 |
|
14 |
|
15 |
|
16 |
|
17 | @Injectable()
|
18 | export class GoogleMapsAPIWrapper {
|
19 | private _map: Promise<mapTypes.GoogleMap>;
|
20 | private _mapResolver: (value?: mapTypes.GoogleMap) => void;
|
21 |
|
22 | constructor(private _loader: MapsAPILoader, private _zone: NgZone) {
|
23 | this._map =
|
24 | new Promise<mapTypes.GoogleMap>((resolve: () => void) => { this._mapResolver = resolve; });
|
25 | }
|
26 |
|
27 | createMap(el: HTMLElement, mapOptions: mapTypes.MapOptions): Promise<void> {
|
28 | return this._loader.load().then(() => {
|
29 | const map = new google.maps.Map(el, mapOptions);
|
30 | this._mapResolver(<mapTypes.GoogleMap>map);
|
31 | return;
|
32 | });
|
33 | }
|
34 |
|
35 | setMapOptions(options: mapTypes.MapOptions) {
|
36 | this._map.then((m: mapTypes.GoogleMap) => { m.setOptions(options); });
|
37 | }
|
38 |
|
39 | /**
|
40 | * Creates a google map marker with the map context
|
41 | */
|
42 | createMarker(options: mapTypes.MarkerOptions = <mapTypes.MarkerOptions>{}):
|
43 | Promise<mapTypes.Marker> {
|
44 | return this._map.then((map: mapTypes.GoogleMap) => {
|
45 | options.map = map;
|
46 | return new google.maps.Marker(options);
|
47 | });
|
48 | }
|
49 |
|
50 | createInfoWindow(options?: mapTypes.InfoWindowOptions): Promise<mapTypes.InfoWindow> {
|
51 | return this._map.then(() => { return new google.maps.InfoWindow(options); });
|
52 | }
|
53 |
|
54 | /**
|
55 | * Creates a google.map.Circle for the current map.
|
56 | */
|
57 | createCircle(options: mapTypes.CircleOptions): Promise<mapTypes.Circle> {
|
58 | return this._map.then((map: mapTypes.GoogleMap) => {
|
59 | options.map = map;
|
60 | return new google.maps.Circle(options);
|
61 | });
|
62 | }
|
63 |
|
64 | createPolyline(options: PolylineOptions): Promise<Polyline> {
|
65 | return this.getNativeMap().then((map: mapTypes.GoogleMap) => {
|
66 | let line = new google.maps.Polyline(options);
|
67 | line.setMap(map);
|
68 | return line;
|
69 | });
|
70 | }
|
71 |
|
72 | createPolygon(options: mapTypes.PolygonOptions): Promise<mapTypes.Polyline> {
|
73 | return this.getNativeMap().then((map: mapTypes.GoogleMap) => {
|
74 | let polygon = new google.maps.Polygon(options);
|
75 | polygon.setMap(map);
|
76 | return polygon;
|
77 | });
|
78 | }
|
79 |
|
80 | /**
|
81 | * Determines if given coordinates are insite a Polygon path.
|
82 | */
|
83 | containsLocation(latLng: mapTypes.LatLngLiteral, polygon: mapTypes.Polygon): Promise<boolean> {
|
84 | return google.maps.geometry.poly.containsLocation(latLng, polygon);
|
85 | }
|
86 |
|
87 | subscribeToMapEvent<E>(eventName: string): Observable<E> {
|
88 | return Observable.create((observer: Observer<E>) => {
|
89 | this._map.then((m: mapTypes.GoogleMap) => {
|
90 | m.addListener(eventName, (arg: E) => { this._zone.run(() => observer.next(arg)); });
|
91 | });
|
92 | });
|
93 | }
|
94 |
|
95 | setCenter(latLng: mapTypes.LatLngLiteral): Promise<void> {
|
96 | return this._map.then((map: mapTypes.GoogleMap) => map.setCenter(latLng));
|
97 | }
|
98 |
|
99 | getZoom(): Promise<number> { return this._map.then((map: mapTypes.GoogleMap) => map.getZoom()); }
|
100 |
|
101 | getBounds(): Promise<mapTypes.LatLngBounds> {
|
102 | return this._map.then((map: mapTypes.GoogleMap) => map.getBounds());
|
103 | }
|
104 |
|
105 | setZoom(zoom: number): Promise<void> {
|
106 | return this._map.then((map: mapTypes.GoogleMap) => map.setZoom(zoom));
|
107 | }
|
108 |
|
109 | getCenter(): Promise<mapTypes.LatLng> {
|
110 | return this._map.then((map: mapTypes.GoogleMap) => map.getCenter());
|
111 | }
|
112 |
|
113 | panTo(latLng: mapTypes.LatLng|mapTypes.LatLngLiteral): Promise<void> {
|
114 | return this._map.then((map) => map.panTo(latLng));
|
115 | }
|
116 |
|
117 | fitBounds(latLng: mapTypes.LatLngBounds|mapTypes.LatLngBoundsLiteral): Promise<void> {
|
118 | return this._map.then((map) => map.fitBounds(latLng));
|
119 | }
|
120 |
|
121 | panToBounds(latLng: mapTypes.LatLngBounds|mapTypes.LatLngBoundsLiteral): Promise<void> {
|
122 | return this._map.then((map) => map.panToBounds(latLng));
|
123 | }
|
124 |
|
125 | /**
|
126 | * Returns the native Google Maps Map instance. Be careful when using this instance directly.
|
127 | */
|
128 | getNativeMap(): Promise<mapTypes.GoogleMap> { return this._map; }
|
129 |
|
130 | /**
|
131 | * Triggers the given event name on the map instance.
|
132 | */
|
133 | triggerMapEvent(eventName: string): Promise<void> {
|
134 | return this._map.then((m) => google.maps.event.trigger(m, eventName));
|
135 | }
|
136 | }
|
137 |
|
\ | No newline at end of file |