fix: un-shim Maps JS types and use new published typings

examples/angular_sample_app/package.json

@@ -29,7 +29,7 @@
     "@angular/cli": "^16.1.6",
     "@angular/compiler-cli": "^16.1.7",
     "@ngx-env/builder": "^16.1.2",
-    "@types/google.maps": "~3.53.6",
+    "@types/google.maps": "~3.55.8",
     "typescript": "~5.0.2"
   }
 }

examples/angular_sample_app/src/app/app.component.ts

@@ -33,8 +33,7 @@ const DEFAULT_ZOOM_WITH_LOCATION = 16;
 export class AppComponent {
   readonly mapsApiKey = import.meta.env.NG_APP_MAPS_API_KEY;
 
-  // TODO: revert to google.maps.places.Place when Maps JS typings updated.
-  college?: any;  // google.maps.places.Place;
+  college?: google.maps.places.Place;
 
   @ViewChild('overlay') overlay!: ElementRef<OverlayLayout>;
 

package.json

@@ -76,7 +76,7 @@
     "@rollup/plugin-node-resolve": "^15.2.1",
     "@rollup/plugin-replace": "^5.0.2",
     "@rollup/plugin-terser": "^0.4.3",
-    "@types/google.maps": "~3.55.6",
+    "@types/google.maps": "~3.55.8",
     "@types/jasmine": "^4.3.6",
     "@types/react": "^18.2.24",
     "@web/test-runner": "^0.17.1",

src/place_building_blocks/place_field_boolean/place_field_boolean_test.ts

@@ -56,7 +56,8 @@ describe('place field boolean test', () => {
       hasDelivery: true,
       hasDineIn: true,
       hasTakeout: true,
-      accessibilityOptions: {hasWheelchairAccessibleEntrance: true},
+      accessibilityOptions: {hasWheelchairAccessibleEntrance: true} as
+          google.maps.places.AccessibilityOptions,
       isReservable: true,
       servesBeer: true,
       servesBreakfast: true,
@@ -91,7 +92,8 @@ describe('place field boolean test', () => {
       hasDelivery: false,
       hasDineIn: false,
       hasTakeout: false,
-      accessibilityOptions: {hasWheelchairAccessibleEntrance: false},
+      accessibilityOptions: {hasWheelchairAccessibleEntrance: false} as
+          google.maps.places.AccessibilityOptions,
       isReservable: false,
       servesBeer: false,
       servesBreakfast: false,
@@ -126,7 +128,8 @@ describe('place field boolean test', () => {
       hasDelivery: null,
       hasDineIn: null,
       hasTakeout: null,
-      accessibilityOptions: {hasWheelchairAccessibleEntrance: null},
+      accessibilityOptions: {hasWheelchairAccessibleEntrance: null} as
+          google.maps.places.AccessibilityOptions,
       isReservable: null,
       servesBeer: null,
       servesBreakfast: null,

src/route_building_blocks/map_controller_test.ts

@@ -153,7 +153,8 @@ describe('MapController', () => {
     const viewportManager = host.mapController.viewportManager;
 
     expect(viewportManager).toBeDefined();
-    expect(viewportManager!.map).toBe(mapElement);
+    expect(viewportManager!.map)
+        .toBe(mapElement as unknown as google.maps.MapElement);
   });
 
   it('updates the viewport manager when moved to a different map', async () => {
@@ -163,6 +164,7 @@ describe('MapController', () => {
     const host = mapElement1.appendChild(new TestMapControllerHost());
     mapElement2.appendChild(host);
 
-    expect(host.mapController.viewportManager!.map).toBe(mapElement2);
+    expect(host.mapController.viewportManager!.map)
+        .toBe(mapElement2 as unknown as google.maps.MapElement);
   });
 });

src/route_building_blocks/viewport_manager_test.ts

@@ -12,6 +12,10 @@ import {FakeLatLngBounds} from '../testing/fake_lat_lng.js';
 
 import {ViewportManager} from './viewport_manager.js';
 
+function getFakeMap(): google.maps.MapElement {
+  return new FakeMapElement() as unknown as google.maps.MapElement;
+}
+
 describe('ViewportManager', () => {
   const env = new Environment();
 
@@ -20,31 +24,31 @@ describe('ViewportManager', () => {
   });
 
   it('sets the map in the constructor', () => {
-    const map = new FakeMapElement();
+    const map = getFakeMap();
     const manager = new ViewportManager(map);
 
     expect(manager.map).toBe(map);
   });
 
   describe('getInstanceForMap()', () => {
     it('constructs an instance for a map', () => {
-      const map = new FakeMapElement();
+      const map = getFakeMap();
       const manager = ViewportManager.getInstanceForMap(map);
 
       expect(manager.map).toBe(map);
     });
 
     it('constructs separate instances for separate maps', () => {
-      const map1 = new FakeMapElement();
-      const map2 = new FakeMapElement();
+      const map1 = getFakeMap();
+      const map2 = getFakeMap();
       const manager1 = ViewportManager.getInstanceForMap(map1);
       const manager2 = ViewportManager.getInstanceForMap(map2);
 
       expect(manager1).not.toBe(manager2);
     });
 
     it('uses the same insntance for the same map', () => {
-      const map = new FakeMapElement();
+      const map = getFakeMap();
       const manager1 = ViewportManager.getInstanceForMap(map);
       const manager2 = ViewportManager.getInstanceForMap(map);
 
@@ -54,7 +58,7 @@ describe('ViewportManager', () => {
 
   describe('registration', () => {
     it('updates the viewport when registering a new component', async () => {
-      const manager = ViewportManager.getInstanceForMap(new FakeMapElement());
+      const manager = ViewportManager.getInstanceForMap(getFakeMap());
       const component = {getBounds: () => null};
       spyOn(manager, 'updateViewport');
       await manager.register(component);
@@ -63,7 +67,7 @@ describe('ViewportManager', () => {
     });
 
     it(`doesn't update when registering an existing component`, async () => {
-      const manager = ViewportManager.getInstanceForMap(new FakeMapElement());
+      const manager = ViewportManager.getInstanceForMap(getFakeMap());
       const component = {getBounds: () => null};
       await manager.register(component);
       spyOn(manager, 'updateViewport');
@@ -73,7 +77,7 @@ describe('ViewportManager', () => {
     });
 
     it('updates when unregistering a registered component', async () => {
-      const manager = ViewportManager.getInstanceForMap(new FakeMapElement());
+      const manager = ViewportManager.getInstanceForMap(getFakeMap());
       const component = {getBounds: () => null};
       await manager.register(component);
       spyOn(manager, 'updateViewport');
@@ -83,7 +87,7 @@ describe('ViewportManager', () => {
     });
 
     it(`doesn't update when unregistering an unknown component`, async () => {
-      const manager = ViewportManager.getInstanceForMap(new FakeMapElement());
+      const manager = ViewportManager.getInstanceForMap(getFakeMap());
       const component = {getBounds: () => null};
       spyOn(manager, 'updateViewport');
       await manager.unregister(component);
@@ -94,7 +98,7 @@ describe('ViewportManager', () => {
 
   describe('setting the viewport', () => {
     it('fits the bounds of a registered component', async () => {
-      const map = new FakeMapElement();
+      const map = getFakeMap();
       const manager = ViewportManager.getInstanceForMap(map);
       const component = {
         getBounds: () => ({north: 1, south: 0, east: 1, west: 0})
@@ -108,7 +112,7 @@ describe('ViewportManager', () => {
     });
 
     it('fits the bounds union of two registered components', async () => {
-      const map = new FakeMapElement();
+      const map = getFakeMap();
       const manager = ViewportManager.getInstanceForMap(map);
       const component1 = {
         getBounds: () => ({north: 1, south: 0, east: 1, west: 0})
@@ -118,7 +122,7 @@ describe('ViewportManager', () => {
       };
 
       await manager.register(component1);
-      map.innerMap.fitBounds.calls.reset();
+      (map as unknown as FakeMapElement).innerMap.fitBounds.calls.reset();
       await manager.register(component2);
 
       expect(map.innerMap.fitBounds)
@@ -127,7 +131,7 @@ describe('ViewportManager', () => {
     });
 
     it('fits the remaining bounds when unregistering a component', async () => {
-      const map = new FakeMapElement();
+      const map = getFakeMap();
       const manager = ViewportManager.getInstanceForMap(map);
       const component1 = {
         getBounds: () => ({north: 1, south: 0, east: 1, west: 0})
@@ -138,7 +142,7 @@ describe('ViewportManager', () => {
 
       await manager.register(component1);
       await manager.register(component2);
-      map.innerMap.fitBounds.calls.reset();
+      (map as unknown as FakeMapElement).innerMap.fitBounds.calls.reset();
       await manager.unregister(component1);
 
       expect(map.innerMap.fitBounds)
@@ -147,28 +151,28 @@ describe('ViewportManager', () => {
     });
 
     it(`doesn't call fitBounds when removing the only component`, async () => {
-      const map = new FakeMapElement();
+      const map = getFakeMap();
       const manager = ViewportManager.getInstanceForMap(map);
       const component = {
         getBounds: () => ({north: 1, south: 0, east: 1, west: 0})
       };
 
       await manager.register(component);
-      map.innerMap.fitBounds.calls.reset();
+      (map as unknown as FakeMapElement).innerMap.fitBounds.calls.reset();
       await manager.unregister(component);
 
       expect(map.innerMap.fitBounds).not.toHaveBeenCalled();
     });
 
     it('fits bounds when calling updateViewport() manually', async () => {
-      const map = new FakeMapElement();
+      const map = getFakeMap();
       const manager = ViewportManager.getInstanceForMap(map);
       const component = {
         getBounds: () => ({north: 1, south: 0, east: 1, west: 0})
       };
 
       await manager.register(component);
-      map.innerMap.fitBounds.calls.reset();
+      (map as unknown as FakeMapElement).innerMap.fitBounds.calls.reset();
       await manager.updateViewport();
 
       expect(map.innerMap.fitBounds)

src/utils/googlemaps_types.ts

@@ -10,52 +10,17 @@
  */
 
 /** Attribution object for Place photos and reviews. */
-export declare interface AuthorAttribution {
-  displayName: string;
-  photoURI: string|null;
-  uri: string|null;
-}
+export type AuthorAttribution = google.maps.places.AuthorAttribution;
 
 /** Place Photo object. */
-export declare type Photo = Omit<google.maps.places.Photo, 'attributions'>& {
-  authorAttributions: AuthorAttribution[];
-};
+export type Photo = google.maps.places.Photo;
 
 /** Place Review object. */
-export declare type Review =
-    Omit<google.maps.places.Review, 'author'|'authorURI'|'authorPhotoURI'>& {
-  authorAttribution: AuthorAttribution|null;
-};
-
-/** Search by text request. */
-export declare interface SearchByTextRequest {
-  textQuery: string;
-  fields: string[];
-  locationBias?: LatLng|LatLngLiteral|LatLngBounds|LatLngBoundsLiteral;
-  locationRestriction?: LatLngBounds|LatLngBoundsLiteral;
-  includedType?: string;
-  region?: string;
-}
+export type Review = google.maps.places.Review
 
-/** Updated Place class with new attribution schema. */
-export declare interface Place extends Omit<
-    google.maps.places.Place,
-    'photos'|'reviews'|'fetchFields'|'accessibilityOptions'> {
-  photos?: Photo[];
-  reviews?: Review[];
-  accessibilityOptions?: {hasWheelchairAccessibleEntrance: boolean|null}|null;
-  fetchFields: (options: google.maps.places.FetchFieldsRequest) =>
-      Promise<{place: Place}>;
-}
-
-/** Places library. */
-export declare interface PlacesLibrary extends
-    Omit<google.maps.PlacesLibrary, 'Place'> {
-  Place: {
-    new(options: google.maps.places.PlaceOptions): Place;
-    searchByText: (request: SearchByTextRequest) => Promise<{places: Place[]}>;
-  };
-}
+export type SearchByTextRequest = google.maps.places.SearchByTextRequest;
+export type Place = google.maps.places.Place;
+export type PlacesLibrary = google.maps.PlacesLibrary;
 
 /** google.maps.marker.AdvancedMarkerElement. */
 export type AdvancedMarkerElement = google.maps.marker.AdvancedMarkerElement;