Skip to content

Commit add7799

Browse files
crisbetocrisbeto
committed
refactor(google-maps): avoid internal typing issues
Works around some issues with typings internally.
1 parent a7a9e5f commit add7799

17 files changed

Lines changed: 51 additions & 24 deletions

File tree

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -30,6 +30,7 @@ import {isPlatformBrowser} from '@angular/common';
3030
import {Observable} from 'rxjs';
3131
import {MapEventManager} from '../map-event-manager';
3232
import {take} from 'rxjs/operators';
33+
import {importLibrary} from '../import-library';
3334

3435
interface GoogleMapsWindow extends Window {
3536
gm_authFailure?: () => void;
@@ -310,8 +311,7 @@ export class GoogleMap implements OnChanges, OnInit, OnDestroy {
310311
// user has subscribed to.
311312
this._ngZone.runOutsideAngular(async () => {
312313
const mapConstructor =
313-
google.maps.Map ||
314-
((await google.maps.importLibrary('maps')) as google.maps.MapsLibrary).Map;
314+
google.maps.Map || (await importLibrary<google.maps.Map>('maps', 'Map'));
315315
this.googleMap = new mapConstructor(this._mapEl, this._combineOptions());
316316
this._eventManager.setTarget(this.googleMap);
317317
this.mapInitialized.emit(this.googleMap);

‎src/google-maps/import-library.ts‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
/**
2+
* @license
3+
* Copyright Google LLC All Rights Reserved.
4+
*
5+
* Use of this source code is governed by an MIT-style license that can be
6+
* found in the LICENSE file at https://angular.io/license
7+
*/
8+
9+
/** Imports a Google Maps library. */
10+
export async function importLibrary<T>(name: string, symbol: string): Promise<T> {
11+
// TODO(crisbeto): needs to cast to `any` to avoid some internal limitations around typings.
12+
// Should be cleaned up eventually.
13+
const library = await (window as any).google.maps.importLibrary(name);
14+
return library[symbol];
15+
}

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

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@
1212
import {Directive, EventEmitter, Output} from '@angular/core';
1313

1414
import {MapBaseLayer} from '../map-base-layer';
15+
import {importLibrary} from '../import-library';
1516

1617
/**
1718
* Angular component that renders a Google Maps Bicycling Layer via the Google Maps JavaScript API.
@@ -38,7 +39,7 @@ export class MapBicyclingLayer extends MapBaseLayer {
3839
protected override async _initializeObject() {
3940
const layerConstructor =
4041
google.maps.BicyclingLayer ||
41-
((await google.maps.importLibrary('maps')) as google.maps.MapsLibrary).BicyclingLayer;
42+
(await importLibrary<google.maps.BicyclingLayer>('maps', 'BicyclingLayer'));
4243
this.bicyclingLayer = new layerConstructor();
4344
this.bicyclingLayerInitialized.emit(this.bicyclingLayer);
4445
}

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,7 @@ import {map, take, takeUntil} from 'rxjs/operators';
2424

2525
import {GoogleMap} from '../google-map/google-map';
2626
import {MapEventManager} from '../map-event-manager';
27+
import {importLibrary} from '../import-library';
2728

2829
/**
2930
* Angular component that renders a Google Maps Circle via the Google Maps JavaScript API.
@@ -180,8 +181,7 @@ export class MapCircle implements OnInit, OnDestroy {
180181
this._ngZone.runOutsideAngular(async () => {
181182
const map = await this._map._resolveMap();
182183
const circleConstructor =
183-
google.maps.Circle ||
184-
((await google.maps.importLibrary('maps')) as google.maps.MapsLibrary).Circle;
184+
google.maps.Circle || (await importLibrary<google.maps.Circle>('maps', 'Circle'));
185185
this.circle = new circleConstructor(options);
186186
this._assertInitialized();
187187
this.circle.setMap(map);

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,7 @@ import {
2424
import {Observable} from 'rxjs';
2525
import {GoogleMap} from '../google-map/google-map';
2626
import {MapEventManager} from '../map-event-manager';
27+
import {importLibrary} from '../import-library';
2728

2829
/**
2930
* Angular component that renders a Google Maps Directions Renderer via the Google Maps
@@ -88,8 +89,7 @@ export class MapDirectionsRenderer implements OnInit, OnChanges, OnDestroy {
8889
const map = await this._googleMap._resolveMap();
8990
const rendererConstructor =
9091
google.maps.DirectionsRenderer ||
91-
((await google.maps.importLibrary('routes')) as google.maps.RoutesLibrary)
92-
.DirectionsRenderer;
92+
(await importLibrary<google.maps.DirectionsRenderer>('routes', 'DirectionsRenderer'));
9393
this.directionsRenderer = new rendererConstructor(this._combineOptions());
9494
this._assertInitialized();
9595
this.directionsRenderer.setMap(map);

‎src/google-maps/map-directions-renderer/map-directions-service.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@
1010
/// <reference types="google.maps" />
1111

1212
import {Injectable, NgZone} from '@angular/core';
13+
import {importLibrary} from '../import-library';
1314
import {Observable} from 'rxjs';
1415

1516
export interface MapDirectionsResponse {
@@ -51,8 +52,7 @@ export class MapDirectionsService {
5152
if (!this._directionsService) {
5253
const serviceConstructor =
5354
google.maps.DirectionsService ||
54-
((await google.maps.importLibrary('routes')) as google.maps.RoutesLibrary)
55-
.DirectionsService;
55+
(await importLibrary<google.maps.DirectionsService>('routes', 'DirectionsService'));
5656
this._directionsService = new serviceConstructor();
5757
}
5858

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

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@
1010
/// <reference types="google.maps" />
1111

1212
import {Injectable, NgZone} from '@angular/core';
13+
import {importLibrary} from '../import-library';
1314
import {Observable} from 'rxjs';
1415

1516
export interface MapGeocoderResponse {
@@ -47,7 +48,7 @@ export class MapGeocoder {
4748
if (!this._geocoder) {
4849
const geocoderConstructor =
4950
google.maps.Geocoder ||
50-
((await google.maps.importLibrary('geocoding')) as google.maps.GeocodingLibrary).Geocoder;
51+
(await importLibrary<google.maps.Geocoder>('geocoding', 'Geocoder'));
5152
this._geocoder = new geocoderConstructor();
5253
}
5354

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

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,7 @@ import {takeUntil} from 'rxjs/operators';
2424

2525
import {GoogleMap} from '../google-map/google-map';
2626
import {MapEventManager} from '../map-event-manager';
27+
import {importLibrary} from '../import-library';
2728

2829
/**
2930
* Angular component that renders a Google Maps Ground Overlay via the Google Maps JavaScript API.
@@ -123,7 +124,7 @@ export class MapGroundOverlay implements OnInit, OnDestroy {
123124
const map = await this._map._resolveMap();
124125
const overlayConstructor =
125126
google.maps.GroundOverlay ||
126-
((await google.maps.importLibrary('maps')) as google.maps.MapsLibrary).GroundOverlay;
127+
(await importLibrary<google.maps.GroundOverlay>('maps', 'GroundOverlay'));
127128
this.groundOverlay = new overlayConstructor(this._url.getValue(), bounds, {
128129
clickable: this.clickable,
129130
opacity: this._opacity.value,

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

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,7 @@ import {
2222
} from '@angular/core';
2323

2424
import {GoogleMap} from '../google-map/google-map';
25+
import {importLibrary} from '../import-library';
2526

2627
/** Possible data that can be shown on a heatmap layer. */
2728
export type HeatmapData =
@@ -81,7 +82,7 @@ export class MapHeatmapLayer implements OnInit, OnChanges, OnDestroy {
8182
if (this._googleMap._isBrowser) {
8283
if (
8384
!window.google?.maps?.visualization &&
84-
!window.google?.maps.importLibrary &&
85+
!(window as any).google?.maps.importLibrary &&
8586
(typeof ngDevMode === 'undefined' || ngDevMode)
8687
) {
8788
throw Error(
@@ -98,8 +99,10 @@ export class MapHeatmapLayer implements OnInit, OnChanges, OnDestroy {
9899
const map = await this._googleMap._resolveMap();
99100
const heatmapConstructor =
100101
google.maps.visualization?.HeatmapLayer ||
101-
((await google.maps.importLibrary('visualization')) as google.maps.VisualizationLibrary)
102-
.HeatmapLayer;
102+
(await importLibrary<google.maps.visualization.HeatmapLayer>(
103+
'visualization',
104+
'HeatmapLayer',
105+
));
103106
this.heatmap = new heatmapConstructor(this._combineOptions());
104107
this._assertInitialized();
105108
this.heatmap.setMap(map);

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

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,7 @@ import {map, take, takeUntil} from 'rxjs/operators';
2626
import {GoogleMap} from '../google-map/google-map';
2727
import {MapEventManager} from '../map-event-manager';
2828
import {MapAnchorPoint} from '../map-anchor-point';
29+
import {importLibrary} from '../import-library';
2930

3031
/**
3132
* Angular component that renders a Google Maps info window via the Google Maps JavaScript API.
@@ -122,7 +123,7 @@ export class MapInfoWindow implements OnInit, OnDestroy {
122123
this._ngZone.runOutsideAngular(async () => {
123124
const infoWindowConstructor =
124125
google.maps.InfoWindow ||
125-
((await google.maps.importLibrary('maps')) as google.maps.MapsLibrary).InfoWindow;
126+
(await importLibrary<google.maps.InfoWindow>('maps', 'InfoWindow'));
126127
this.infoWindow = new infoWindowConstructor(options);
127128
this._eventManager.setTarget(this.infoWindow);
128129
this.infoWindowInitialized.emit(this.infoWindow);

0 commit comments

Comments
 (0)