Skip to content

Commit a34e6bb

Browse files
crisbetommalerba
authored andcommitted
fix(google-maps): rendering blank if custom options with no center are provided (#19916)
If an options object without a `center` is passed to the Google Maps API, it'll render a grey rectangle which looks broken. These changes make sure that we always pass in a `center` so something is rendered. Fixes #19908.
1 parent 8cfe08b commit a34e6bb

File tree

2 files changed

+15
-1
lines changed

2 files changed

+15
-1
lines changed

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

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -155,6 +155,18 @@ describe('GoogleMap', () => {
155155
expect(mapSpy.setOptions).toHaveBeenCalledWith({...options, heading: 170});
156156
});
157157

158+
it('should set a default center if the custom options do not provide one', () => {
159+
const options = {zoom: 7};
160+
mapSpy = createMapSpy(options);
161+
mapConstructorSpy = createMapConstructorSpy(mapSpy).and.callThrough();
162+
163+
const fixture = TestBed.createComponent(TestApp);
164+
fixture.componentInstance.options = options;
165+
fixture.detectChanges();
166+
167+
expect(mapConstructorSpy.calls.mostRecent()?.args[1].center).toBeTruthy();
168+
});
169+
158170
it('gives precedence to center and zoom over options', () => {
159171
const inputOptions = {center: {lat: 3, lng: 5}, zoom: 7, heading: 170};
160172
const correctedOptions = {

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

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -454,7 +454,9 @@ export class GoogleMap implements OnChanges, OnInit, OnDestroy {
454454
.pipe(map(([options, center, zoom]) => {
455455
const combinedOptions: google.maps.MapOptions = {
456456
...options,
457-
center: center || options.center,
457+
// It's important that we set **some** kind of `center`, otherwise
458+
// Google Maps will render a blank rectangle which looks broken.
459+
center: center || options.center || DEFAULT_OPTIONS.center,
458460
zoom: zoom !== undefined ? zoom : options.zoom,
459461
mapTypeId: this.mapTypeId
460462
};

0 commit comments

Comments
 (0)