Skip to content

Commit ee061b4

Browse files
mbehrlichmbehrlich
committed
feat(google-maps): Add map-marker component
Make various fixes internal cleanup fixes. Change google-map-marker to map-marker. Use QueryList's changes property instead of a setter for ContentChildren.
1 parent d0c3ff4 commit ee061b4

20 files changed

+115
-135
lines changed

‎packages.bzl

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -82,7 +82,6 @@ MATERIAL_SCSS_LIBS = [
8282

8383
GOOGLE_MAPS_PACKAGES = [
8484
"google-map",
85-
"google-map-marker",
8685
]
8786

8887
GOOGLE_MAPS_TARGETS = ["//src/google-maps"] + ["//src/google-maps/%s" % p for p in GOOGLE_MAPS_PACKAGES]

‎src/dev-app/google-map/BUILD.bazel

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,6 @@ ng_module(
88
assets = ["google-map-demo.html"],
99
deps = [
1010
"//src/google-maps/google-map",
11-
"//src/google-maps/google-map-marker",
1211
"@npm//@angular/router",
1312
],
1413
)

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

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,6 @@ import {CommonModule} from '@angular/common';
1010
import {HttpClientJsonpModule, HttpClientModule} from '@angular/common/http';
1111
import {NgModule} from '@angular/core';
1212
import {GoogleMapModule} from '@angular/google-maps/google-map';
13-
import {GoogleMapMarkerModule} from '@angular/google-maps/google-map-marker';
1413
import {RouterModule} from '@angular/router';
1514

1615
import {GoogleMapDemo} from './google-map-demo';
@@ -19,7 +18,6 @@ import {GoogleMapDemo} from './google-map-demo';
1918
imports: [
2019
CommonModule,
2120
GoogleMapModule,
22-
GoogleMapMarkerModule,
2321
HttpClientJsonpModule,
2422
HttpClientModule,
2523
RouterModule.forChild([{path: '', component: GoogleMapDemo}]),

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

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -4,10 +4,13 @@
44
[center]="center"
55
[zoom]="zoom"
66
(mapClick)="handleClick($event)"
7-
(mapMousemove)="handleMove($event)">
8-
<google-map-marker [position]="markerPosition"
7+
(mapMousemove)="handleMove($event)"
8+
(mapRightclick)="handleRightclick()">
9+
<map-marker></map-marker>
10+
<map-marker *ngFor="let markerPosition of markerPositions"
11+
[position]="markerPosition"
912
[options]="markerOptions"
10-
(mapClick)="clickMarker($event)"></google-map-marker>
13+
(mapClick)="clickMarker($event)"></map-marker>
1114
</google-map>
1215

1316
<div>Latitude: {{display?.lat}}</div>

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

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

2121
center = {lat: 24, lng: 12};
2222
markerOptions = {draggable: false};
23-
markerPosition = {lat: 39.830205, lng: -77.232949};
23+
markerPositions: google.maps.LatLngLiteral[] = [];
2424
zoom = 4;
2525
display?: google.maps.LatLngLiteral;
2626

@@ -32,7 +32,7 @@ export class GoogleMapDemo {
3232
}
3333

3434
handleClick(event: google.maps.MouseEvent) {
35-
this.center = event.latLng.toJSON();
35+
this.markerPositions.push(event.latLng.toJSON());
3636
}
3737

3838
handleMove(event: google.maps.MouseEvent) {
@@ -43,4 +43,8 @@ export class GoogleMapDemo {
4343
console.log(this.markerOptions);
4444
this.markerOptions = {draggable: true};
4545
}
46+
47+
handleRightclick() {
48+
this.markerPositions.pop();
49+
}
4650
}

‎src/dev-app/system-config.js

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -57,7 +57,6 @@ var MATERIAL_PACKAGES = [
5757

5858
var GOOGLE_MAPS_PACKAGES = [
5959
'google-map',
60-
'google-map-marker',
6160
];
6261

6362
var MATERIAL_EXPERIMENTAL_PACKAGES = [

‎src/google-maps/BUILD.bazel

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@ ng_module(
1212
),
1313
module_name = "@angular/google-maps",
1414
deps = ["//src/google-maps/%s" % p for p in GOOGLE_MAPS_PACKAGES] + [
15+
"//src/google-maps/map-marker",
1516
"@npm//@angular/core",
1617
"@npm//@types/googlemaps",
1718
],

‎src/google-maps/google-map-marker/google-map-marker.md

Whitespace-only changes.

‎src/google-maps/google-map-marker/public-api.ts

Lines changed: 0 additions & 10 deletions
This file was deleted.

‎src/google-maps/google-map-marker/tsconfig-build.json

Lines changed: 0 additions & 15 deletions
This file was deleted.

‎src/google-maps/google-map/BUILD.bazel

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ ng_module(
1616
),
1717
module_name = "@angular/google-maps/google-map",
1818
deps = [
19-
"//src/google-maps/google-map-marker",
19+
"//src/google-maps/map-marker",
2020
"@npm//@angular/core",
2121
"@npm//@types/googlemaps",
2222
"@npm//rxjs",
@@ -31,7 +31,7 @@ ng_test_library(
3131
),
3232
deps = [
3333
":google-map",
34-
"//src/google-maps/google-map-marker",
34+
"//src/google-maps/map-marker",
3535
"//src/google-maps/testing",
3636
"@npm//@angular/platform-browser",
3737
],

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

Lines changed: 12 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -6,11 +6,16 @@
66
* found in the LICENSE file at https://angular.io/license
77
*/
88

9-
import {NgModule} from '@angular/core';
10-
import {GoogleMap} from './google-map';
9+
import {NgModule} from '@angular/core';
1110

12-
@NgModule({
13-
exports: [GoogleMap],
14-
declarations: [GoogleMap],
15-
})
16-
export class GoogleMapModule {}
11+
import {MapMarker, MapMarkerModule} from '../map-marker/index';
12+
13+
import {GoogleMap} from './google-map';
14+
15+
@NgModule({
16+
imports: [MapMarkerModule],
17+
exports: [GoogleMap, MapMarker],
18+
declarations: [GoogleMap],
19+
})
20+
export class GoogleMapModule {
21+
}

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

Lines changed: 6 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import {Component} from '@angular/core';
22
import {async, TestBed} from '@angular/core/testing';
33
import {By} from '@angular/platform-browser';
44

5-
import {GoogleMapMarker, GoogleMapMarkerModule} from '../google-map-marker/index';
5+
import {MapMarker, MapMarkerModule} from '../map-marker/index';
66
import {
77
createMapConstructorSpy,
88
createMapSpy,
@@ -40,7 +40,7 @@ describe('GoogleMap', () => {
4040
TestBed.configureTestingModule({
4141
imports: [
4242
GoogleMapModule,
43-
GoogleMapMarkerModule,
43+
MapMarkerModule,
4444
],
4545
declarations: [TestApp],
4646
});
@@ -248,12 +248,11 @@ describe('GoogleMap', () => {
248248
createMapConstructorSpy(mapSpy).and.callThrough();
249249

250250
const fixture = TestBed.createComponent(TestApp);
251-
const markerComponent =
252-
fixture.debugElement.query(By.directive(GoogleMapMarker)).componentInstance;
253-
spyOn(markerComponent, 'setMap').and.callThrough();
251+
const markerComponent = fixture.debugElement.query(By.directive(MapMarker)).componentInstance;
252+
spyOn(markerComponent, '_setMap').and.callThrough();
254253
fixture.detectChanges();
255254

256-
expect(markerComponent.setMap).toHaveBeenCalledWith(mapSpy);
255+
expect(markerComponent._setMap).toHaveBeenCalledWith(mapSpy);
257256
});
258257
});
259258

@@ -267,7 +266,7 @@ describe('GoogleMap', () => {
267266
(mapClick)="handleClick($event)"
268267
(centerChanged)="handleCenterChanged()"
269268
(mapRightclick)="handleRightclick($event)">
270-
<google-map-marker></google-map-marker>
269+
<map-marker></map-marker>
271270
</google-map>`,
272271
})
273272
class TestApp {

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

Lines changed: 22 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import {
2+
AfterContentInit,
23
ChangeDetectionStrategy,
34
Component,
45
ContentChildren,
@@ -11,9 +12,10 @@ import {
1112
Output,
1213
QueryList,
1314
} from '@angular/core';
15+
import {BehaviorSubject, combineLatest, Observable, Subject} from 'rxjs';
1416
import {map, shareReplay, take, takeUntil} from 'rxjs/operators';
15-
import {BehaviorSubject, combineLatest, Observable, ReplaySubject, Subject} from 'rxjs';
16-
import {GoogleMapMarker} from '@angular/google-maps/google-map-marker';
17+
18+
import {MapMarker} from '../map-marker/index';
1719

1820
interface GoogleMapsWindow extends Window {
1921
google?: typeof google;
@@ -49,7 +51,7 @@ export const DEFAULT_WIDTH = '500px';
4951
changeDetection: ChangeDetectionStrategy.OnPush,
5052
template: '<div class="map-container"></div><ng-content></ng-content>',
5153
})
52-
export class GoogleMap implements OnChanges, OnInit, OnDestroy {
54+
export class GoogleMap implements OnChanges, OnInit, AfterContentInit, OnDestroy {
5355
@Input() height = DEFAULT_HEIGHT;
5456

5557
@Input() width = DEFAULT_WIDTH;
@@ -175,21 +177,19 @@ export class GoogleMap implements OnChanges, OnInit, OnDestroy {
175177
*/
176178
@Output() zoomChanged = new EventEmitter<void>();
177179

178-
@ContentChildren(GoogleMapMarker) set markers(markers: QueryList<GoogleMapMarker>) {
179-
this._markers.next(markers.toArray());
180-
}
180+
@ContentChildren(MapMarker) _markers: QueryList<MapMarker>;
181181

182182
private _mapEl: HTMLElement;
183183
private _googleMap!: UpdatedGoogleMap;
184184

185+
private _googleMapChanges!: Observable<google.maps.Map>;
186+
185187
private readonly _listeners: google.maps.MapsEventListener[] = [];
186188

187189
private readonly _options = new BehaviorSubject<google.maps.MapOptions>(DEFAULT_OPTIONS);
188190
private readonly _center = new BehaviorSubject<google.maps.LatLngLiteral|undefined>(undefined);
189191
private readonly _zoom = new BehaviorSubject<number|undefined>(undefined);
190192

191-
private readonly _markers = new ReplaySubject<GoogleMapMarker[]>(1);
192-
193193
private readonly _destroy = new Subject<void>();
194194

195195
constructor(private readonly _elementRef: ElementRef) {
@@ -213,15 +213,21 @@ export class GoogleMap implements OnChanges, OnInit, OnDestroy {
213213

214214
const combinedOptionsChanges = this._combineOptions();
215215

216-
const googleMapChanges = this._initializeMap(combinedOptionsChanges);
217-
googleMapChanges.subscribe((googleMap: google.maps.Map) => {
216+
this._googleMapChanges = this._initializeMap(combinedOptionsChanges);
217+
this._googleMapChanges.subscribe((googleMap: google.maps.Map) => {
218218
this._googleMap = googleMap as UpdatedGoogleMap;
219+
219220
this._initializeEventHandlers();
220221
});
221222

222-
this._watchForOptionsChanges(googleMapChanges, combinedOptionsChanges);
223+
this._watchForOptionsChanges(combinedOptionsChanges);
224+
}
223225

224-
this._watchForMarkerChanges(googleMapChanges);
226+
ngAfterContentInit() {
227+
for (const marker of this._markers.toArray()) {
228+
marker._setMap(this._googleMap);
229+
}
230+
this._watchForMarkerChanges();
225231
}
226232

227233
ngOnDestroy() {
@@ -402,9 +408,8 @@ export class GoogleMap implements OnChanges, OnInit, OnDestroy {
402408
}
403409

404410
private _watchForOptionsChanges(
405-
googleMapChanges: Observable<google.maps.Map>,
406411
optionsChanges: Observable<google.maps.MapOptions>) {
407-
combineLatest(googleMapChanges, optionsChanges)
412+
combineLatest(this._googleMapChanges, optionsChanges)
408413
.pipe(takeUntil(this._destroy))
409414
.subscribe(([googleMap, options]) => {
410415
googleMap.setOptions(options);
@@ -457,12 +462,12 @@ export class GoogleMap implements OnChanges, OnInit, OnDestroy {
457462
}
458463
}
459464

460-
private _watchForMarkerChanges(googleMapChanges: Observable<google.maps.Map>) {
461-
combineLatest(googleMapChanges, this._markers)
465+
private _watchForMarkerChanges() {
466+
combineLatest(this._googleMapChanges, this._markers.changes)
462467
.pipe(takeUntil(this._destroy))
463468
.subscribe(([googleMap, markers]) => {
464469
for (let marker of markers) {
465-
marker.setMap(googleMap);
470+
marker._setMap(googleMap);
466471
}
467472
});
468473
}

‎src/google-maps/google-map-marker/BUILD.bazel renamed to ‎src/google-maps/map-marker/BUILD.bazel

Lines changed: 2 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -2,19 +2,17 @@ package(default_visibility = ["//visibility:public"])
22

33
load(
44
"//tools:defaults.bzl",
5-
"markdown_to_html",
65
"ng_module",
76
"ng_test_library",
87
"ng_web_test_suite",
98
)
109

1110
ng_module(
12-
name = "google-map-marker",
11+
name = "map-marker",
1312
srcs = glob(
1413
["**/*.ts"],
1514
exclude = ["**/*.spec.ts"],
1615
),
17-
module_name = "@angular/google-maps/google-map-marker",
1816
deps = [
1917
"@npm//@angular/core",
2018
"@npm//@types/googlemaps",
@@ -29,7 +27,7 @@ ng_test_library(
2927
exclude = ["**/*.e2e.spec.ts"],
3028
),
3129
deps = [
32-
":google-map-marker",
30+
":map-marker",
3331
"//src/google-maps/testing",
3432
"@npm//@angular/platform-browser",
3533
],
@@ -40,11 +38,6 @@ ng_web_test_suite(
4038
deps = [":unit_test_sources"],
4139
)
4240

43-
markdown_to_html(
44-
name = "overview",
45-
srcs = [":google-map-marker.md"],
46-
)
47-
4841
filegroup(
4942
name = "source-files",
5043
srcs = glob(["**/*.ts"]),

‎src/google-maps/google-map-marker/index.ts renamed to ‎src/google-maps/map-marker/index.ts

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,4 +6,5 @@
66
* found in the LICENSE file at https://angular.io/license
77
*/
88

9-
export * from './public-api';
9+
export * from './map-marker';
10+
export * from './map-marker-module';

‎src/google-maps/google-map-marker/google-map-marker-module.ts renamed to ‎src/google-maps/map-marker/map-marker-module.ts

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -7,10 +7,11 @@
77
*/
88

99
import {NgModule} from '@angular/core';
10-
import {GoogleMapMarker} from './google-map-marker';
10+
import {MapMarker} from './map-marker';
1111

1212
@NgModule({
13-
exports: [GoogleMapMarker],
14-
declarations: [GoogleMapMarker],
13+
exports: [MapMarker],
14+
declarations: [MapMarker],
1515
})
16-
export class GoogleMapMarkerModule { }
16+
export class MapMarkerModule {
17+
}

0 commit comments

Comments
 (0)