fix(google-maps): mapId not being set

Fixes that the `mapId` input wasn't being passed along to the map. Fixes #28608.
angular · Feb 21, 2024 · 5269e0f · 5269e0f
1 parent d1d1d02
commit 5269e0f
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 2 deletions.
diff --git a/src/google-maps/google-map/google-map.spec.ts b/src/google-maps/google-map/google-map.spec.ts
@@ -52,7 +52,10 @@ describe('GoogleMap', () => {
     const container = fixture.debugElement.query(By.css('div'))!;
     expect(container.nativeElement.style.height).toBe(DEFAULT_HEIGHT);
     expect(container.nativeElement.style.width).toBe(DEFAULT_WIDTH);
-    expect(mapConstructorSpy).toHaveBeenCalledWith(container.nativeElement, DEFAULT_OPTIONS);
+    expect(mapConstructorSpy).toHaveBeenCalledWith(container.nativeElement, {
+      ...DEFAULT_OPTIONS,
+      mapId: undefined,
+    });
   });
 
   it('sets height and width of the map', () => {
@@ -67,7 +70,10 @@ describe('GoogleMap', () => {
     const container = fixture.debugElement.query(By.css('div'))!;
     expect(container.nativeElement.style.height).toBe('750px');
     expect(container.nativeElement.style.width).toBe('400px');
-    expect(mapConstructorSpy).toHaveBeenCalledWith(container.nativeElement, DEFAULT_OPTIONS);
+    expect(mapConstructorSpy).toHaveBeenCalledWith(container.nativeElement, {
+      ...DEFAULT_OPTIONS,
+      mapId: undefined,
+    });
 
     fixture.componentInstance.height = '650px';
     fixture.componentInstance.width = '350px';
@@ -118,6 +124,7 @@ describe('GoogleMap', () => {
       center: {lat: 3, lng: 5},
       zoom: 7,
       mapTypeId: DEFAULT_OPTIONS.mapTypeId,
+      mapId: undefined,
     };
     mapSpy = createMapSpy(options);
     mapConstructorSpy = createMapConstructorSpy(mapSpy);
@@ -344,6 +351,20 @@ describe('GoogleMap', () => {
     expect(mapSpy.setMapTypeId).toHaveBeenCalledWith('roadmap');
   });
 
+  it('should set the map ID', () => {
+    mapSpy = createMapSpy(DEFAULT_OPTIONS);
+    mapConstructorSpy = createMapConstructorSpy(mapSpy);
+
+    const fixture = TestBed.createComponent(TestApp);
+    fixture.componentInstance.mapId = '123';
+    fixture.detectChanges();
+
+    expect(mapConstructorSpy).toHaveBeenCalledWith(
+      jasmine.any(HTMLElement),
+      jasmine.objectContaining({mapId: '123'}),
+    );
+  });
+
   it('sets mapTypeId through the options', () => {
     const options = {mapTypeId: 'satellite'};
     mapSpy = createMapSpy(options);
@@ -401,6 +422,7 @@ describe('GoogleMap', () => {
       [zoom]="zoom"
       [options]="options"
       [mapTypeId]="mapTypeId"
+      [mapId]="mapId"
       (mapClick)="handleClick($event)"
       (centerChanged)="handleCenterChanged()"
       (mapRightclick)="handleRightclick($event)"
@@ -417,6 +439,7 @@ class TestApp {
   zoom?: number;
   options?: google.maps.MapOptions;
   mapTypeId?: google.maps.MapTypeId;
+  mapId?: string;
 
   handleClick(event: google.maps.MapMouseEvent) {}
   handleCenterChanged() {}

diff --git a/src/google-maps/google-map/google-map.ts b/src/google-maps/google-map/google-map.ts
@@ -531,6 +531,7 @@ export class GoogleMap implements OnChanges, OnInit, OnDestroy {
       // Passing in an undefined `mapTypeId` seems to break tile loading
       // so make sure that we have some kind of default (see #22082).
       mapTypeId: this.mapTypeId || options.mapTypeId || DEFAULT_OPTIONS.mapTypeId,
+      mapId: this.mapId || options.mapId,
     };
   }