Skip to content

Commit 9ce2a90

Browse files
authored
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 3f2721d commit 9ce2a90

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
@@ -169,6 +169,18 @@ describe('GoogleMap', () => {
169169
expect(mapSpy.setOptions).toHaveBeenCalledWith({...options, heading: 170});
170170
});
171171

172+
it('should set a default center if the custom options do not provide one', () => {
173+
const options = {zoom: 7};
174+
mapSpy = createMapSpy(options);
175+
mapConstructorSpy = createMapConstructorSpy(mapSpy).and.callThrough();
176+
177+
const fixture = TestBed.createComponent(TestApp);
178+
fixture.componentInstance.options = options;
179+
fixture.detectChanges();
180+
181+
expect(mapConstructorSpy.calls.mostRecent()?.args[1].center).toBeTruthy();
182+
});
183+
172184
it('gives precedence to center and zoom over options', () => {
173185
const inputOptions = {center: {lat: 3, lng: 5}, zoom: 7, heading: 170};
174186
const correctedOptions = {

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

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

0 commit comments

Comments
 (0)