UNPKG

4.49 kBPlain TextView Raw
1import {Injectable, NgZone} from '@angular/core';
2import {Observable} from 'rxjs/Observable';
3import {Observer} from 'rxjs/Observer';
4
5import * as mapTypes from './google-maps-types';
6import {Polyline} from './google-maps-types';
7import {PolylineOptions} from './google-maps-types';
8import {MapsAPILoader} from './maps-api-loader/maps-api-loader';
9
10// todo: add types for this
11declare var google: any;
12
13/**
14 * Wrapper class that handles the communication with the Google Maps Javascript
15 * API v3
16 */
17@Injectable()
18export 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