Skip to content

Commit de53812

Browse files
mbehrlichmbehrlich
committed
feat(google-maps): Add methods and event handling to Google Map
Add jsdoc and comments to new events, methods, and properties.
1 parent 07d6e0a commit de53812

File tree

4 files changed

+178
-9
lines changed

4 files changed

+178
-9
lines changed

‎src/dev-app/google-map/google-map-demo.html

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,4 +3,8 @@
33
width="750px"
44
[center]="center"
55
[zoom]="zoom"
6-
(mapClick)="handleClick($event)"></google-map>
6+
(mapClick)="handleClick($event)"
7+
(mapMousemove)="handleMove($event)"></google-map>
8+
9+
<div>Latitude: {{display?.lat}}</div>
10+
<div>Longitude: {{display?.lng}}</div>

‎src/dev-app/google-map/google-map-demo.ts

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,7 @@ export class GoogleMapDemo {
2020

2121
center = {lat: 24, lng: 12};
2222
zoom = 4;
23+
display?: google.maps.LatLngLiteral;
2324

2425
constructor(httpClient: HttpClient) {
2526
httpClient.jsonp('https://maps.googleapis.com/maps/api/js?', 'callback')
@@ -31,4 +32,8 @@ export class GoogleMapDemo {
3132
handleClick(event: google.maps.MouseEvent) {
3233
this.center = event.latLng.toJSON();
3334
}
35+
36+
handleMove(event: google.maps.MouseEvent) {
37+
this.display = event.latLng.toJSON();
38+
}
3439
}

‎src/google-maps/google-map/google-map.spec.ts

Lines changed: 10 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -16,14 +16,16 @@ import {
1616
TestingWindow
1717
} from './testing/fake-google-map-utils';
1818

19-
const TEST_BOUNDS: google.maps.LatLngBoundsLiteral = {
19+
/** Represents boundaries of a map to be used in tests. */
20+
const testBounds: google.maps.LatLngBoundsLiteral = {
2021
east: 12,
2122
north: 13,
2223
south: 14,
2324
west: 15,
2425
};
2526

26-
const TEST_POSITION: google.maps.LatLngLiteral = {
27+
/** Represents a latitude/longitude position to be used in tests. */
28+
const testPosition: google.maps.LatLngLiteral = {
2729
lat: 30,
2830
lng: 35,
2931
};
@@ -158,17 +160,17 @@ describe('GoogleMap', () => {
158160

159161
const component = fixture.debugElement.query(By.directive(GoogleMap)).componentInstance;
160162

161-
component.fitBounds(TEST_BOUNDS, 10);
162-
expect(mapSpy.fitBounds).toHaveBeenCalledWith(TEST_BOUNDS, 10);
163+
component.fitBounds(testBounds, 10);
164+
expect(mapSpy.fitBounds).toHaveBeenCalledWith(testBounds, 10);
163165

164166
component.panBy(12, 13);
165167
expect(mapSpy.panBy).toHaveBeenCalledWith(12, 13);
166168

167-
component.panTo(TEST_POSITION);
168-
expect(mapSpy.panTo).toHaveBeenCalledWith(TEST_POSITION);
169+
component.panTo(testPosition);
170+
expect(mapSpy.panTo).toHaveBeenCalledWith(testPosition);
169171

170-
component.panToBounds(TEST_BOUNDS, 10);
171-
expect(mapSpy.panToBounds).toHaveBeenCalledWith(TEST_BOUNDS, 10);
172+
component.panToBounds(testBounds, 10);
173+
expect(mapSpy.panToBounds).toHaveBeenCalledWith(testBounds, 10);
172174
});
173175

174176
it('exposes methods that get information about the Google Map', () => {

‎src/google-maps/google-map/google-map.ts

Lines changed: 158 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,7 @@ interface GoogleMapsWindow extends Window {
1616
google?: typeof google;
1717
}
1818

19+
// TODO(mbehrlich): Update this to use original map after updating DefinitelyTyped
1920
/**
2021
* Extends the Google Map interface due to the Definitely Typed implementation
2122
* missing "getClickableIcons".
@@ -63,23 +64,112 @@ export class GoogleMap implements OnChanges, OnInit, OnDestroy {
6364
this._options.next(options || DEFAULT_OPTIONS);
6465
}
6566

67+
/**
68+
* See
69+
* https://developers.google.com/maps/documentation/javascript/reference/map#Map.bounds_changed
70+
*/
6671
@Output() boundsChanged = new EventEmitter<void>();
72+
73+
/**
74+
* See
75+
* https://developers.google.com/maps/documentation/javascript/reference/map#Map.center_changed
76+
*/
6777
@Output() centerChanged = new EventEmitter<void>();
78+
79+
/**
80+
* See
81+
* https://developers.google.com/maps/documentation/javascript/reference/map#Map.click
82+
*/
6883
@Output() mapClick = new EventEmitter<google.maps.MouseEvent|google.maps.IconMouseEvent>();
84+
85+
/**
86+
* See
87+
* https://developers.google.com/maps/documentation/javascript/reference/map#Map.dblclick
88+
*/
6989
@Output() mapDblclick = new EventEmitter<google.maps.MouseEvent>();
90+
91+
/**
92+
* See
93+
* https://developers.google.com/maps/documentation/javascript/reference/map#Map.drag
94+
*/
7095
@Output() mapDrag = new EventEmitter<void>();
96+
97+
/**
98+
* See
99+
* https://developers.google.com/maps/documentation/javascript/reference/map#Map.dragend
100+
*/
71101
@Output() mapDragend = new EventEmitter<void>();
102+
103+
/**
104+
* See
105+
* https://developers.google.com/maps/documentation/javascript/reference/map#Map.dragstart
106+
*/
72107
@Output() mapDragstart = new EventEmitter<void>();
108+
109+
/**
110+
* See
111+
* https://developers.google.com/maps/documentation/javascript/reference/map#Map.heading_changed
112+
*/
73113
@Output() headingChanged = new EventEmitter<void>();
114+
115+
/**
116+
* See
117+
* https://developers.google.com/maps/documentation/javascript/reference/map#Map.idle
118+
*/
74119
@Output() idle = new EventEmitter<void>();
120+
121+
/**
122+
* See
123+
* https://developers.google.com/maps/documentation/javascript/reference/map#Map.maptypeid_changed
124+
*/
75125
@Output() maptypeidChanged = new EventEmitter<void>();
126+
127+
/**
128+
* See
129+
* https://developers.google.com/maps/documentation/javascript/reference/map#Map.mousemove
130+
*/
76131
@Output() mapMousemove = new EventEmitter<google.maps.MouseEvent>();
132+
133+
/**
134+
* See
135+
* https://developers.google.com/maps/documentation/javascript/reference/map#Map.mouseout
136+
*/
77137
@Output() mapMouseout = new EventEmitter<google.maps.MouseEvent>();
138+
139+
/**
140+
* See
141+
* https://developers.google.com/maps/documentation/javascript/reference/map#Map.mouseover
142+
*/
78143
@Output() mapMouseover = new EventEmitter<google.maps.MouseEvent>();
144+
145+
/**
146+
* See
147+
* developers.google.com/maps/documentation/javascript/reference/map#Map.projection_changed
148+
*/
79149
@Output() projectionChanged = new EventEmitter<void>();
150+
151+
/**
152+
* See
153+
* https://developers.google.com/maps/documentation/javascript/reference/map#Map.rightclick
154+
*/
80155
@Output() mapRightclick = new EventEmitter<google.maps.MouseEvent>();
156+
157+
/**
158+
* See
159+
* https://developers.google.com/maps/documentation/javascript/reference/map#Map.tilesloaded
160+
*/
81161
@Output() tilesloaded = new EventEmitter<void>();
162+
163+
/**
164+
* See
165+
* https://developers.google.com/maps/documentation/javascript/reference/map#Map.tilt_changed
166+
*/
82167
@Output() tiltChanged = new EventEmitter<void>();
168+
169+
/**
170+
* See
171+
* https://developers.google.com/maps/documentation/javascript/reference/map#Map.zoom_changed
172+
*/
83173
@Output() zoomChanged = new EventEmitter<void>();
84174

85175
private _mapEl: HTMLElement;
@@ -131,74 +221,142 @@ export class GoogleMap implements OnChanges, OnInit, OnDestroy {
131221
}
132222
}
133223

224+
/**
225+
* See
226+
* https://developers.google.com/maps/documentation/javascript/reference/map#Map.fitBounds
227+
*/
134228
fitBounds(
135229
bounds: google.maps.LatLngBounds|google.maps.LatLngBoundsLiteral,
136230
padding?: number|google.maps.Padding) {
137231
this._googleMap.fitBounds(bounds, padding);
138232
}
139233

234+
/**
235+
* See
236+
* https://developers.google.com/maps/documentation/javascript/reference/map#Map.panBy
237+
*/
140238
panBy(x: number, y: number) {
141239
this._googleMap.panBy(x, y);
142240
}
143241

242+
/**
243+
* See
244+
* https://developers.google.com/maps/documentation/javascript/reference/map#Map.panTo
245+
*/
144246
panTo(latLng: google.maps.LatLng|google.maps.LatLngLiteral) {
145247
this._googleMap.panTo(latLng);
146248
}
147249

250+
/**
251+
* See
252+
* https://developers.google.com/maps/documentation/javascript/reference/map#Map.panToBounds
253+
*/
148254
panToBounds(
149255
latLngBounds: google.maps.LatLngBounds|google.maps.LatLngBoundsLiteral,
150256
padding?: number|google.maps.Padding) {
151257
this._googleMap.panToBounds(latLngBounds, padding);
152258
}
153259

260+
/**
261+
* See
262+
* https://developers.google.com/maps/documentation/javascript/reference/map#Map.getBounds
263+
*/
154264
getBounds(): google.maps.LatLngBounds|null {
155265
return this._googleMap.getBounds() || null;
156266
}
157267

268+
/**
269+
* See
270+
* https://developers.google.com/maps/documentation/javascript/reference/map#Map.getCenter
271+
*/
158272
getCenter(): google.maps.LatLng {
159273
return this._googleMap.getCenter();
160274
}
161275

276+
/**
277+
* See
278+
* https://developers.google.com/maps/documentation/javascript/reference/map#Map.getClickableIcons
279+
*/
162280
getClickableIcons(): boolean {
163281
return this._googleMap.getClickableIcons();
164282
}
165283

284+
/**
285+
* See
286+
* https://developers.google.com/maps/documentation/javascript/reference/map#Map.getHeading
287+
*/
166288
getHeading(): number {
167289
return this._googleMap.getHeading();
168290
}
169291

292+
/**
293+
* See
294+
* https://developers.google.com/maps/documentation/javascript/reference/map#Map.getMapTypeId
295+
*/
170296
getMapTypeId(): google.maps.MapTypeId|string {
171297
return this._googleMap.getMapTypeId();
172298
}
173299

300+
/**
301+
* See
302+
* https://developers.google.com/maps/documentation/javascript/reference/map#Map.getProjection
303+
*/
174304
getProjection(): google.maps.Projection|null {
175305
return this._googleMap.getProjection();
176306
}
177307

308+
/**
309+
* See
310+
* https://developers.google.com/maps/documentation/javascript/reference/map#Map.getStreetView
311+
*/
178312
getStreetView(): google.maps.StreetViewPanorama {
179313
return this._googleMap.getStreetView();
180314
}
181315

316+
/**
317+
* See
318+
* https://developers.google.com/maps/documentation/javascript/reference/map#Map.getTilt
319+
*/
182320
getTilt(): number {
183321
return this._googleMap.getTilt();
184322
}
185323

324+
/**
325+
* See
326+
* https://developers.google.com/maps/documentation/javascript/reference/map#Map.getZoom
327+
*/
186328
getZoom(): number {
187329
return this._googleMap.getZoom();
188330
}
189331

332+
/**
333+
* See
334+
* https://developers.google.com/maps/documentation/javascript/reference/map#Map.controls
335+
*/
190336
get controls(): Array<google.maps.MVCArray<Node>> {
191337
return this._googleMap.controls;
192338
}
193339

340+
/**
341+
* See
342+
* https://developers.google.com/maps/documentation/javascript/reference/map#Map.data
343+
*/
194344
get data(): google.maps.Data {
195345
return this._googleMap.data;
196346
}
197347

348+
/**
349+
* See
350+
* https://developers.google.com/maps/documentation/javascript/reference/map#Map.mapTypes
351+
*/
198352
get mapTypes(): google.maps.MapTypeRegistry {
199353
return this._googleMap.mapTypes;
200354
}
201355

356+
/**
357+
* See
358+
* https://developers.google.com/maps/documentation/javascript/reference/map#Map.overlayMapTypes
359+
*/
202360
get overlayMapTypes(): google.maps.MVCArray<google.maps.MapType> {
203361
return this._googleMap.overlayMapTypes;
204362
}

0 commit comments

Comments
 (0)