diff --git a/samples/3d-accessibility-features/index.ts b/samples/3d-accessibility-features/index.ts index 457b84c4..8069b74f 100644 --- a/samples/3d-accessibility-features/index.ts +++ b/samples/3d-accessibility-features/index.ts @@ -6,9 +6,13 @@ // [START maps_3d_accessibility_features] async function initMap() { - const { Map3DElement, Marker3DInteractiveElement, PopoverElement } = - await google.maps.importLibrary('maps3d'); - const { PinElement } = await google.maps.importLibrary('marker'); + const [ + { Map3DElement, Marker3DInteractiveElement, PopoverElement }, + { PinElement }, + ] = await Promise.all([ + google.maps.importLibrary('maps3d'), + google.maps.importLibrary('marker'), + ]); const map = new Map3DElement({ center: { lat: 34.8405, lng: -111.7909, altitude: 1322.7 }, diff --git a/samples/3d-coverage-map/index.ts b/samples/3d-coverage-map/index.ts index d8b1adfc..2eaf7004 100644 --- a/samples/3d-coverage-map/index.ts +++ b/samples/3d-coverage-map/index.ts @@ -18,8 +18,10 @@ const placeAutocomplete = document.querySelector('gmp-place-autocomplete')!; async function initMap() { // Request needed libraries. - await google.maps.importLibrary('maps'); - await google.maps.importLibrary('places'); + await Promise.all([ + google.maps.importLibrary('maps'), + google.maps.importLibrary('places'), + ]); // Get the inner map from the map element. const innerMap = mapElement.innerMap; diff --git a/samples/3d-marker-customization/index.ts b/samples/3d-marker-customization/index.ts index 7fa635d1..e997244f 100644 --- a/samples/3d-marker-customization/index.ts +++ b/samples/3d-marker-customization/index.ts @@ -6,9 +6,11 @@ // [START maps_3d_marker_customization] async function init() { - const { Map3DElement, Marker3DElement } = - await google.maps.importLibrary('maps3d'); - const { PinElement } = await google.maps.importLibrary('marker'); + const [{ Map3DElement, Marker3DElement }, { PinElement }] = + await Promise.all([ + google.maps.importLibrary('maps3d'), + google.maps.importLibrary('marker'), + ]); const map = new Map3DElement({ center: { lat: 37.4176, lng: -122.02, altitude: 0 }, diff --git a/samples/3d-marker-graphics/index.ts b/samples/3d-marker-graphics/index.ts index 96154635..94e07d54 100644 --- a/samples/3d-marker-graphics/index.ts +++ b/samples/3d-marker-graphics/index.ts @@ -6,10 +6,12 @@ // [START maps_3d_marker_graphics] async function init() { - const { Map3DElement, Marker3DElement } = - await google.maps.importLibrary('maps3d'); - const { PinElement } = await google.maps.importLibrary('marker'); - const { Place } = await google.maps.importLibrary('places'); + const [{ Map3DElement, Marker3DElement }, { PinElement }, { Place }] = + await Promise.all([ + google.maps.importLibrary('maps3d'), + google.maps.importLibrary('marker'), + google.maps.importLibrary('places'), + ]); const map = new Map3DElement({ center: { lat: 37.426, lng: -122.082, altitude: 18 }, diff --git a/samples/advanced-markers-accessibility/index.ts b/samples/advanced-markers-accessibility/index.ts index eee4bf54..2764fec9 100644 --- a/samples/advanced-markers-accessibility/index.ts +++ b/samples/advanced-markers-accessibility/index.ts @@ -9,9 +9,11 @@ const mapElement = document.querySelector('gmp-map')!; async function initMap() { // Request needed libraries. - const { Map, InfoWindow } = await google.maps.importLibrary('maps'); - const { AdvancedMarkerElement, PinElement } = - await google.maps.importLibrary('marker'); + const [{ Map, InfoWindow }, { AdvancedMarkerElement, PinElement }] = + await Promise.all([ + google.maps.importLibrary('maps'), + google.maps.importLibrary('marker'), + ]); // Set LatLng and title text for the markers. The first marker (Boynton Pass) // receives the initial focus when tab is pressed. Use arrow keys to move diff --git a/samples/advanced-markers-altitude/index.ts b/samples/advanced-markers-altitude/index.ts index 4bbd1cea..99a4801b 100644 --- a/samples/advanced-markers-altitude/index.ts +++ b/samples/advanced-markers-altitude/index.ts @@ -9,9 +9,10 @@ const mapElement = document.querySelector('gmp-map')!; async function initMap() { // Request needed libraries. - const { Map } = await google.maps.importLibrary('maps'); - const { AdvancedMarkerElement, PinElement } = - await google.maps.importLibrary('marker'); + const [{ Map }, { AdvancedMarkerElement, PinElement }] = await Promise.all([ + google.maps.importLibrary('maps'), + google.maps.importLibrary('marker'), + ]); mapElement.innerMap.setOptions({ tilt: 67.5, diff --git a/samples/advanced-markers-animation/index.ts b/samples/advanced-markers-animation/index.ts index 310be92e..d9928c52 100644 --- a/samples/advanced-markers-animation/index.ts +++ b/samples/advanced-markers-animation/index.ts @@ -43,10 +43,15 @@ const intersectionObserver = new IntersectionObserver((entries) => { async function initMap(): Promise { // Request needed libraries. - const { Map } = await google.maps.importLibrary('maps'); - const { event, ControlPosition } = await google.maps.importLibrary('core'); - const { AdvancedMarkerElement, PinElement } = - await google.maps.importLibrary('marker'); + const [ + { Map }, + { event, ControlPosition }, + { AdvancedMarkerElement, PinElement }, + ] = await Promise.all([ + google.maps.importLibrary('maps'), + google.maps.importLibrary('core'), + google.maps.importLibrary('marker'), + ]); const position = { lat: 37.4242011827985, lng: -122.09242296450893 }; diff --git a/samples/advanced-markers-basic-style/index.ts b/samples/advanced-markers-basic-style/index.ts index ed97850c..57189c98 100644 --- a/samples/advanced-markers-basic-style/index.ts +++ b/samples/advanced-markers-basic-style/index.ts @@ -10,9 +10,10 @@ const mapElement = document.querySelector('gmp-map')!; async function initMap() { // Request needed libraries. - const { Map } = await google.maps.importLibrary('maps'); - const { AdvancedMarkerElement, PinElement } = - await google.maps.importLibrary('marker'); + const [{ Map }, { AdvancedMarkerElement, PinElement }] = await Promise.all([ + google.maps.importLibrary('maps'), + google.maps.importLibrary('marker'), + ]); // Each PinElement is paired with a marker to demonstrate setting each parameter. diff --git a/samples/advanced-markers-collision/index.ts b/samples/advanced-markers-collision/index.ts index 5182c456..c0eb0181 100644 --- a/samples/advanced-markers-collision/index.ts +++ b/samples/advanced-markers-collision/index.ts @@ -11,8 +11,10 @@ const mapElement = document.querySelector('gmp-map')!; // Initialize and add the map async function initMap(): Promise { // Request needed libraries. - const { Map } = await google.maps.importLibrary('maps'); - const { AdvancedMarkerElement } = await google.maps.importLibrary('marker'); + const [{ Map }, { AdvancedMarkerElement }] = await Promise.all([ + google.maps.importLibrary('maps'), + google.maps.importLibrary('marker'), + ]); const markers: google.maps.marker.AdvancedMarkerElement[] = []; diff --git a/samples/advanced-markers-draggable/index.ts b/samples/advanced-markers-draggable/index.ts index 94e96e92..697f3724 100644 --- a/samples/advanced-markers-draggable/index.ts +++ b/samples/advanced-markers-draggable/index.ts @@ -9,8 +9,10 @@ const mapElement = document.querySelector('gmp-map')!; async function initMap() { // Request needed libraries. - const { Map, InfoWindow } = await google.maps.importLibrary('maps'); - const { AdvancedMarkerElement } = await google.maps.importLibrary('marker'); + const [{ Map, InfoWindow }, { AdvancedMarkerElement }] = await Promise.all([ + google.maps.importLibrary('maps'), + google.maps.importLibrary('marker'), + ]); const infoWindow = new InfoWindow(); diff --git a/samples/advanced-markers-graphics/index.ts b/samples/advanced-markers-graphics/index.ts index 17244bfe..69da7e60 100644 --- a/samples/advanced-markers-graphics/index.ts +++ b/samples/advanced-markers-graphics/index.ts @@ -7,10 +7,12 @@ // [START maps_advanced_markers_graphics] async function initMap() { // Request needed libraries. - const { Map } = await google.maps.importLibrary('maps'); - const { AdvancedMarkerElement, PinElement } = - await google.maps.importLibrary('marker'); - const { Place } = await google.maps.importLibrary('places'); + const [{ Map }, { AdvancedMarkerElement, PinElement }, { Place }] = + await Promise.all([ + google.maps.importLibrary('maps'), + google.maps.importLibrary('marker'), + google.maps.importLibrary('places'), + ]); const mapElement = document.querySelector('gmp-map')!; diff --git a/samples/advanced-markers-html-simple/index.ts b/samples/advanced-markers-html-simple/index.ts index 9ad1ef0c..2d7c2d4b 100644 --- a/samples/advanced-markers-html-simple/index.ts +++ b/samples/advanced-markers-html-simple/index.ts @@ -10,8 +10,10 @@ const mapElement = document.querySelector('gmp-map')!; async function initMap() { // Request needed libraries. - const { Map } = await google.maps.importLibrary('maps'); - const { AdvancedMarkerElement } = await google.maps.importLibrary('marker'); + const [{ Map }, { AdvancedMarkerElement }] = await Promise.all([ + google.maps.importLibrary('maps'), + google.maps.importLibrary('marker'), + ]); const priceTag = document.createElement('div'); priceTag.className = 'price-tag'; diff --git a/samples/advanced-markers-html/index.ts b/samples/advanced-markers-html/index.ts index 66b48be8..a8dd23fc 100644 --- a/samples/advanced-markers-html/index.ts +++ b/samples/advanced-markers-html/index.ts @@ -8,8 +8,10 @@ // [START maps_advanced_markers_html_snippet] async function initMap() { // Request needed libraries. - const { Map } = await google.maps.importLibrary('maps'); - const { AdvancedMarkerElement } = await google.maps.importLibrary('marker'); + const [{ Map }, { AdvancedMarkerElement }] = await Promise.all([ + google.maps.importLibrary('maps'), + google.maps.importLibrary('marker'), + ]); const center = { lat: 37.43238031167444, lng: -122.16795397128632 }; const map = new Map(document.getElementById('map') as HTMLElement, { diff --git a/samples/advanced-markers-simple/index.ts b/samples/advanced-markers-simple/index.ts index 1ec7d315..9e67a932 100644 --- a/samples/advanced-markers-simple/index.ts +++ b/samples/advanced-markers-simple/index.ts @@ -10,8 +10,10 @@ const mapElement = document.querySelector('gmp-map')!; async function initMap() { // Request needed libraries. - const { Map } = await google.maps.importLibrary('maps'); - const { AdvancedMarkerElement } = await google.maps.importLibrary('marker'); + const [{ Map }, { AdvancedMarkerElement }] = await Promise.all([ + google.maps.importLibrary('maps'), + google.maps.importLibrary('marker'), + ]); const marker = new AdvancedMarkerElement({ position: { lat: 37.4239163, lng: -122.0947209 }, diff --git a/samples/advanced-markers-zoom/index.ts b/samples/advanced-markers-zoom/index.ts index 64051170..8051f5dd 100644 --- a/samples/advanced-markers-zoom/index.ts +++ b/samples/advanced-markers-zoom/index.ts @@ -9,8 +9,10 @@ const mapElement = document.querySelector('gmp-map')!; async function initMap() { // Request needed libraries. - const { Map } = await google.maps.importLibrary('maps'); - const { AdvancedMarkerElement } = await google.maps.importLibrary('marker'); + const [{ Map }, { AdvancedMarkerElement }] = await Promise.all([ + google.maps.importLibrary('maps'), + google.maps.importLibrary('marker'), + ]); const markerOptions = [ { diff --git a/samples/build-single.sh b/samples/build-single.sh index 9198562c..3935b77d 100644 --- a/samples/build-single.sh +++ b/samples/build-single.sh @@ -5,20 +5,37 @@ set -e NAME=$(basename $PWD) -npx prettier --check --ignore-path ../../.prettierignore . -npx eslint - common_recursive_grep_options=( -r --exclude-dir=node_modules ) all_type_recursive_grep_options=( "${common_recursive_grep_options[@]}" --include=*.{html,js,ts,css,jsx,tsx} --exclude-dir=dist ) html_script_src_grep_options=( 'src="https://maps' "${common_recursive_grep_options[@]}" --include=*.html ) +find . -type f \( -name "*.ts" -o -name "*.tsx" \) -not -path "./dist/*" -not -path "./node_modules/*" -print0 \ + | while IFS= read -r -d '' file; do + range=999 + while IFS= read -r line; do + # echo "$file $range $line" + if [[ "$line" == *"await google"* ]]; then + if [[ $range -lt 3 ]]; then + echo "Found 'await google' in close proximity. Consider Promise.all() instead. $file" + exit 1 + fi + + range=0 + else + range=$(( $range + 1 )) + fi + done < "$file" +done + set +e + grep weekly "${all_type_recursive_grep_options[@]}" if [[ $? -eq 0 ]]; then # sure, it could be other things, but so far it's not, so we'll keep it simple for now echo "Found 'weekly'. Please remove (it's the default channel)." exit 1 fi + # callback & importLibrary both show up the in the inline loader, that's okay. comments also okay grep callback "${all_type_recursive_grep_options[@]}" | grep -v -E '^[-_./a-z0-9]+:\s*//' | grep -v importLibrary if [[ $? -eq 0 ]]; then @@ -26,6 +43,7 @@ if [[ $? -eq 0 ]]; then echo "Found 'callback'. Please replace with a more modern pattern for loading Maps JS." exit 1 fi + grep "${html_script_src_grep_options[@]}" if [[ $? -eq 0 ]]; then grep "${html_script_src_grep_options[@]}" | grep "loading=async" @@ -44,8 +62,12 @@ if [[ $? -eq 0 ]]; then exit 1 fi fi + set -e +npx prettier --check --ignore-path ../../.prettierignore . +npx eslint + # clean comments for empty lines, and then clean up, to preserve newlines sed -i.sed-back 's#^$#// TMP EMPTY LINE#g' *.ts && rm *.sed-back set +e diff --git a/samples/circle-simple/index.ts b/samples/circle-simple/index.ts index b73598dd..1801b1f0 100644 --- a/samples/circle-simple/index.ts +++ b/samples/circle-simple/index.ts @@ -10,9 +10,12 @@ let innerMap; async function initMap() { // Request needed libraries. - const { Circle } = await google.maps.importLibrary('maps'); - const { AdvancedMarkerElement } = await google.maps.importLibrary('marker'); - const { event } = await google.maps.importLibrary('core'); + const [{ Circle }, { AdvancedMarkerElement }, { event }] = + await Promise.all([ + google.maps.importLibrary('maps'), + google.maps.importLibrary('marker'), + google.maps.importLibrary('core'), + ]); // Get the gmp-map element. const mapElement = document.querySelector('gmp-map')!; diff --git a/samples/control-options/index.ts b/samples/control-options/index.ts index f31f6680..03b2a88e 100755 --- a/samples/control-options/index.ts +++ b/samples/control-options/index.ts @@ -10,9 +10,11 @@ async function initMap() { // Request the needed libraries. - const { MapTypeControlStyle, MapTypeId } = - await google.maps.importLibrary('maps'); - const { ControlPosition } = await google.maps.importLibrary('core'); + const [{ MapTypeControlStyle, MapTypeId }, { ControlPosition }] = + await Promise.all([ + google.maps.importLibrary('maps'), + google.maps.importLibrary('core'), + ]); const mapElement = document.querySelector('gmp-map')!; diff --git a/samples/control-positioning-labels/index.ts b/samples/control-positioning-labels/index.ts index 592f2e67..6c60097b 100644 --- a/samples/control-positioning-labels/index.ts +++ b/samples/control-positioning-labels/index.ts @@ -35,8 +35,10 @@ async function MakeControl(controlDiv: HTMLElement, label: string) { async function initMap() { // Request the needed libraries. - await google.maps.importLibrary('maps'); - const { ControlPosition } = await google.maps.importLibrary('core'); + const [, { ControlPosition }] = await Promise.all([ + google.maps.importLibrary('maps'), + google.maps.importLibrary('core'), + ]); const mapElement = document.querySelector('gmp-map')!; diff --git a/samples/control-positioning/index.ts b/samples/control-positioning/index.ts index 92b03ca7..d5e74a29 100755 --- a/samples/control-positioning/index.ts +++ b/samples/control-positioning/index.ts @@ -10,8 +10,10 @@ let innerMap; async function initMap() { // Request needed libraries. - const { MapTypeControlStyle } = await google.maps.importLibrary('maps'); - const { ControlPosition } = await google.maps.importLibrary('core'); + const [{ MapTypeControlStyle }, { ControlPosition }] = await Promise.all([ + google.maps.importLibrary('maps'), + google.maps.importLibrary('core'), + ]); // Get the inner map. const innerMap = mapElement.innerMap; diff --git a/samples/dds-datasets-point/index.ts b/samples/dds-datasets-point/index.ts index eb50b5c6..74059446 100644 --- a/samples/dds-datasets-point/index.ts +++ b/samples/dds-datasets-point/index.ts @@ -86,8 +86,10 @@ function setStyle(params) { async function initMap() { // Request needed libraries. - await google.maps.importLibrary('maps'); - const { event } = await google.maps.importLibrary('core'); + const [, { event }] = await Promise.all([ + google.maps.importLibrary('maps'), + google.maps.importLibrary('core'), + ]); // Get the inner map. innerMap = mapElement.innerMap; diff --git a/samples/dds-region-viewer/index.ts b/samples/dds-region-viewer/index.ts index bcba5a51..caf8730d 100644 --- a/samples/dds-region-viewer/index.ts +++ b/samples/dds-region-viewer/index.ts @@ -34,9 +34,11 @@ let selectedPlaceId: string; import * as countries from './src/countries.json'; async function initMap() { - await google.maps.importLibrary('maps'); - await google.maps.importLibrary('places'); - await google.maps.importLibrary('marker'); + await Promise.all([ + google.maps.importLibrary('maps'), + google.maps.importLibrary('places'), + google.maps.importLibrary('marker'), + ]); // Get the inner map. innerMap = mapElement.innerMap; diff --git a/samples/deckgl-heatmap/index.ts b/samples/deckgl-heatmap/index.ts index b3b3ffde..31f5a1ae 100644 --- a/samples/deckgl-heatmap/index.ts +++ b/samples/deckgl-heatmap/index.ts @@ -50,8 +50,10 @@ async function initMap(): Promise { const position = { lat: 37.77325660358167, lng: -122.41712341793448 }; // Using the center from original deckgl-polygon.js // Request needed libraries. - const { Map, InfoWindow } = await google.maps.importLibrary('maps'); - const { AdvancedMarkerElement } = await google.maps.importLibrary('marker'); + const [{ Map, InfoWindow }, { AdvancedMarkerElement }] = await Promise.all([ + google.maps.importLibrary('maps'), + google.maps.importLibrary('marker'), + ]); const mapDiv = document.getElementById('map'); if (!mapDiv) { diff --git a/samples/event-arguments/index.ts b/samples/event-arguments/index.ts index d327be6f..f2d34f4c 100644 --- a/samples/event-arguments/index.ts +++ b/samples/event-arguments/index.ts @@ -7,8 +7,10 @@ // [START maps_event_arguments] async function initMap() { // Request needed libraries. - await google.maps.importLibrary('maps'); - const { AdvancedMarkerElement } = await google.maps.importLibrary('marker'); + const [, { AdvancedMarkerElement }] = await Promise.all([ + google.maps.importLibrary('maps'), + google.maps.importLibrary('marker'), + ]); const mapElement = document.querySelector('gmp-map')!; const innerMap = mapElement.innerMap; diff --git a/samples/event-click-latlng/index.ts b/samples/event-click-latlng/index.ts index 91a6a876..17936bcc 100644 --- a/samples/event-click-latlng/index.ts +++ b/samples/event-click-latlng/index.ts @@ -7,7 +7,6 @@ // [START maps_event_click_latlng] async function initMap() { // Request needed libraries. - await google.maps.importLibrary('maps'); const { InfoWindow } = await google.maps.importLibrary('maps'); // Set up the map. diff --git a/samples/event-closure/index.ts b/samples/event-closure/index.ts index 5928625d..f70142f5 100644 --- a/samples/event-closure/index.ts +++ b/samples/event-closure/index.ts @@ -7,8 +7,10 @@ // [START maps_event_closure] async function initMap() { // Request needed libraries. - await google.maps.importLibrary('maps'); - const { AdvancedMarkerElement } = await google.maps.importLibrary('marker'); + const [, { AdvancedMarkerElement }] = await Promise.all([ + google.maps.importLibrary('maps'), + google.maps.importLibrary('marker'), + ]); const mapElement = document.querySelector('gmp-map')!; const innerMap = mapElement.innerMap; diff --git a/samples/event-simple/index.ts b/samples/event-simple/index.ts index fda76a06..e7941b3c 100644 --- a/samples/event-simple/index.ts +++ b/samples/event-simple/index.ts @@ -7,9 +7,11 @@ // [START maps_event_simple] async function initMap() { // Request needed libraries. - await google.maps.importLibrary('maps'); - const { AdvancedMarkerElement } = await google.maps.importLibrary('marker'); - const { LatLng } = await google.maps.importLibrary('core'); + const [, { AdvancedMarkerElement }, { LatLng }] = await Promise.all([ + google.maps.importLibrary('maps'), + google.maps.importLibrary('marker'), + google.maps.importLibrary('core'), + ]); // Retrieve the map element. const mapElement = document.querySelector('gmp-map')!; diff --git a/samples/infowindow-simple/index.ts b/samples/infowindow-simple/index.ts index 3642b2aa..778f9b2b 100644 --- a/samples/infowindow-simple/index.ts +++ b/samples/infowindow-simple/index.ts @@ -10,8 +10,10 @@ async function initMap(): Promise { // Import the needed libraries. - const { InfoWindow } = await google.maps.importLibrary('maps'); - const { AdvancedMarkerElement } = await google.maps.importLibrary('marker'); + const [{ InfoWindow }, { AdvancedMarkerElement }] = await Promise.all([ + google.maps.importLibrary('maps'), + google.maps.importLibrary('marker'), + ]); // Get the map element and the inner map from it. const mapElement = document.querySelector('gmp-map')!; diff --git a/samples/layer-data-quakes-red/index.ts b/samples/layer-data-quakes-red/index.ts index 916da169..f6e658ff 100644 --- a/samples/layer-data-quakes-red/index.ts +++ b/samples/layer-data-quakes-red/index.ts @@ -8,8 +8,10 @@ let innerMap; async function initMap() { - await google.maps.importLibrary('maps'); - const { SymbolPath } = await google.maps.importLibrary('core'); + const [, { SymbolPath }] = await Promise.all([ + google.maps.importLibrary('maps'), + google.maps.importLibrary('core'), + ]); const mapElement = document.querySelector('gmp-map')!; diff --git a/samples/layer-data-style/index.ts b/samples/layer-data-style/index.ts index c40458f9..2178fe34 100644 --- a/samples/layer-data-style/index.ts +++ b/samples/layer-data-style/index.ts @@ -6,8 +6,10 @@ // [START maps_layer_data_style] async function initMap() { - await google.maps.importLibrary('maps'); - const { event } = await google.maps.importLibrary('core'); + const [, { event }] = await Promise.all([ + google.maps.importLibrary('maps'), + google.maps.importLibrary('core'), + ]); const mapElement = document.querySelector('gmp-map')!; diff --git a/samples/map-projection-simple/index.ts b/samples/map-projection-simple/index.ts index f2a22072..4ad9578b 100644 --- a/samples/map-projection-simple/index.ts +++ b/samples/map-projection-simple/index.ts @@ -51,8 +51,10 @@ async function initMap() { let gallPetersMapType; async function initGallPeters() { - const { ImageMapType } = await google.maps.importLibrary('maps'); - const { Size, Point, LatLng } = await google.maps.importLibrary('core'); + const [{ ImageMapType }, { Size, Point, LatLng }] = await Promise.all([ + google.maps.importLibrary('maps'), + google.maps.importLibrary('core'), + ]); const GALL_PETERS_RANGE_X = 800; const GALL_PETERS_RANGE_Y = 512; diff --git a/samples/place-autocomplete-basic-map/index.ts b/samples/place-autocomplete-basic-map/index.ts index 6501d4f1..3667791d 100644 --- a/samples/place-autocomplete-basic-map/index.ts +++ b/samples/place-autocomplete-basic-map/index.ts @@ -16,10 +16,13 @@ const gmpMapElement = document.querySelector('gmp-map')!; async function initMap(): Promise { // Asynchronously load required libraries from the Google Maps JS API. - await google.maps.importLibrary('places'); - const { AdvancedMarkerElement } = await google.maps.importLibrary('marker'); - const { InfoWindow, Circle } = await google.maps.importLibrary('maps'); - const { Size } = await google.maps.importLibrary('core'); + const [, { AdvancedMarkerElement }, { InfoWindow, Circle }, { Size }] = + await Promise.all([ + google.maps.importLibrary('places'), + google.maps.importLibrary('marker'), + google.maps.importLibrary('maps'), + google.maps.importLibrary('core'), + ]); // Get the initial center directly from the gmp-map element's property. const center = gmpMapElement.center; diff --git a/samples/place-class/index.ts b/samples/place-class/index.ts index e4c4aa70..b84438ce 100644 --- a/samples/place-class/index.ts +++ b/samples/place-class/index.ts @@ -19,8 +19,11 @@ async function initMap() { // [START maps_place_class_fetchfields] async function getPlaceDetails() { - const { Place } = await google.maps.importLibrary('places'); - const { AdvancedMarkerElement } = await google.maps.importLibrary('marker'); + const [{ Place }, { AdvancedMarkerElement }] = await Promise.all([ + google.maps.importLibrary('places'), + google.maps.importLibrary('marker'), + ]); + // Use place ID to create a new Place instance. const place = new Place({ id: 'ChIJyYB_SZVU2YARR-I1Jjf08F0', // San Diego Zoo diff --git a/samples/place-nearby-search/index.ts b/samples/place-nearby-search/index.ts index fd811d85..4a2ebfb7 100644 --- a/samples/place-nearby-search/index.ts +++ b/samples/place-nearby-search/index.ts @@ -13,8 +13,10 @@ let typeSelect; let infoWindow; async function initMap() { - const { InfoWindow } = await google.maps.importLibrary('maps'); - const { event } = await google.maps.importLibrary('core'); + const [{ InfoWindow }, { event }] = await Promise.all([ + google.maps.importLibrary('maps'), + google.maps.importLibrary('core'), + ]); innerMap = mapElement.innerMap; innerMap.setOptions({ @@ -36,10 +38,15 @@ async function initMap() { } async function nearbySearch() { - const { Place, SearchNearbyRankPreference } = - await google.maps.importLibrary('places'); - const { AdvancedMarkerElement } = await google.maps.importLibrary('marker'); - const { spherical } = await google.maps.importLibrary('geometry'); + const [ + { Place, SearchNearbyRankPreference }, + { AdvancedMarkerElement }, + { spherical }, + ] = await Promise.all([ + google.maps.importLibrary('places'), + google.maps.importLibrary('marker'), + google.maps.importLibrary('geometry'), + ]); // [START maps_place_nearby_search_request] // Get bounds and radius to constrain search. center = mapElement.center; diff --git a/samples/place-text-search/index.ts b/samples/place-text-search/index.ts index 9e0f42f5..4955443a 100644 --- a/samples/place-text-search/index.ts +++ b/samples/place-text-search/index.ts @@ -10,8 +10,10 @@ let markers = {}; let infoWindow; async function initMap() { - const { Map, InfoWindow } = await google.maps.importLibrary('maps'); - const { ControlPosition } = await google.maps.importLibrary('core'); + const [{ Map, InfoWindow }, { ControlPosition }] = await Promise.all([ + google.maps.importLibrary('maps'), + google.maps.importLibrary('core'), + ]); const center = { lat: 37.4161493, lng: -122.0812166 }; map = new Map(document.getElementById('map') as HTMLElement, { @@ -42,8 +44,10 @@ async function initMap() { } async function findPlaces(query) { - const { Place } = await google.maps.importLibrary('places'); - const { AdvancedMarkerElement } = await google.maps.importLibrary('marker'); + const [{ Place }, { AdvancedMarkerElement }] = await Promise.all([ + google.maps.importLibrary('places'), + google.maps.importLibrary('marker'), + ]); // [START maps_place_text_search_request] const request = { textQuery: query, diff --git a/samples/polyline-complex/index.ts b/samples/polyline-complex/index.ts index 89a82115..f8bced9d 100644 --- a/samples/polyline-complex/index.ts +++ b/samples/polyline-complex/index.ts @@ -17,8 +17,10 @@ let innerMap: google.maps.Map; async function initMap() { // Import the needed libraries. - const { Polyline } = await google.maps.importLibrary('maps'); - const { AdvancedMarkerElement } = await google.maps.importLibrary('marker'); + const [{ Polyline }, { AdvancedMarkerElement }] = await Promise.all([ + google.maps.importLibrary('maps'), + google.maps.importLibrary('marker'), + ]); innerMap = mapElement.innerMap; diff --git a/samples/routes-get-alternatives/index.ts b/samples/routes-get-alternatives/index.ts index 3c9e46b6..ede4fe92 100644 --- a/samples/routes-get-alternatives/index.ts +++ b/samples/routes-get-alternatives/index.ts @@ -11,8 +11,10 @@ let innerMap; // Initialize and add the map. async function initMap() { // Request the needed libraries. - await google.maps.importLibrary('maps'); - const { event } = await google.maps.importLibrary('core'); + const [, { event }] = await Promise.all([ + google.maps.importLibrary('maps'), + google.maps.importLibrary('core'), + ]); innerMap = mapElement.innerMap; innerMap.setOptions({ diff --git a/samples/routes-markers/index.ts b/samples/routes-markers/index.ts index 0657505e..d3a403bf 100644 --- a/samples/routes-markers/index.ts +++ b/samples/routes-markers/index.ts @@ -11,8 +11,10 @@ let innerMap; // Initialize and add the map. async function initMap() { // Request the needed libraries. - await google.maps.importLibrary('maps'); - const { event } = await google.maps.importLibrary('core'); + const [, { event }] = await Promise.all([ + google.maps.importLibrary('maps'), + google.maps.importLibrary('core'), + ]); innerMap = mapElement.innerMap; innerMap.setOptions({ diff --git a/samples/streetview-overlays/index.ts b/samples/streetview-overlays/index.ts index 6a65682b..e658e224 100644 --- a/samples/streetview-overlays/index.ts +++ b/samples/streetview-overlays/index.ts @@ -10,8 +10,10 @@ let innerMap: google.maps.Map; async function initMap() { // Request needed libraries. - const { Map } = await google.maps.importLibrary('maps'); - const { Marker } = await google.maps.importLibrary('marker'); + const [{ Map }, { Marker }] = await Promise.all([ + google.maps.importLibrary('maps'), + google.maps.importLibrary('marker'), + ]); // Set the location of Astor Place. const astorPlace = { lat: 40.729884, lng: -73.990988 }; diff --git a/samples/test-example/index.ts b/samples/test-example/index.ts index 67055e8d..d3886310 100644 --- a/samples/test-example/index.ts +++ b/samples/test-example/index.ts @@ -20,8 +20,10 @@ let center; async function initMap() { // [START maps_test_example_instantiate_map] // Request the needed libraries. - const { Map } = await google.maps.importLibrary('maps'); - const { AdvancedMarkerElement } = await google.maps.importLibrary('marker'); + const [{ Map }, { AdvancedMarkerElement }] = await Promise.all([ + google.maps.importLibrary('maps'), + google.maps.importLibrary('marker'), + ]); // Get the inner map from the gmp-map element. innerMap = mapElement.innerMap; diff --git a/samples/weather-api-current-compact/index.ts b/samples/weather-api-current-compact/index.ts index cfa99e1d..94e5444e 100644 --- a/samples/weather-api-current-compact/index.ts +++ b/samples/weather-api-current-compact/index.ts @@ -116,8 +116,10 @@ async function createAndAddMarker( location: { name: string; lat: number; lng: number }, markerType: 'initial' | 'button' | 'dynamic' ): Promise { - const { AdvancedMarkerElement } = await google.maps.importLibrary('marker'); - const { LatLng } = await google.maps.importLibrary('core'); + const [{ AdvancedMarkerElement }, { LatLng }] = await Promise.all([ + google.maps.importLibrary('marker'), + google.maps.importLibrary('core'), + ]); const weatherWidget = document.createElement( 'simple-weather-widget' ) as SimpleWeatherWidget;