enforce using Promise.all instead of multiple awaits for importLibrary

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 },
@@ -78,5 +82,5 @@
     document.body.append(map);
 }
 
 initMap();
 // [END maps_3d_accessibility_features]

samples/3d-coverage-map/index.ts

@@ -18,8 +18,10 @@
 
 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;
@@ -37,7 +39,7 @@
 
     placeAutocomplete.addEventListener(
         'gmp-select',
         async ({ placePrediction }) => {
             if (!placePrediction) return;
             const place = placePrediction.toPlace();
             await place.fetchFields({
@@ -51,5 +53,5 @@
         }
     );
 }
 initMap();
 // [END maps_3d_coverage_map]

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 },
@@ -97,5 +99,5 @@
     document.body.append(map);
 }
 
 init();
 // [END maps_3d_marker_customization]

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 },
@@ -102,5 +104,5 @@
     document.body.append(map);
 }
 
 init();
 // [END maps_3d_marker_graphics]

samples/advanced-markers-accessibility/index.ts

@@ -9,9 +9,11 @@
 
 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
@@ -60,7 +62,7 @@
         // [START maps_advanced_markers_accessibility_event_listener]
         // Add a click listener for each marker, and set up the info window.
         marker.addEventListener('gmp-click', (domEvent) => {
             const { target } = domEvent;
             infoWindow.close();
             infoWindow.setContent(marker.title);
             infoWindow.open(marker.map, marker);
@@ -69,5 +71,5 @@
     });
 }
 
 initMap();
 // [END maps_advanced_markers_accessibility]

samples/advanced-markers-altitude/index.ts

@@ -9,9 +9,10 @@
 
 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,
@@ -40,5 +41,5 @@
     // [END maps_advanced_markers_altitude_marker]
 }
 
 initMap();
 // [END maps_advanced_markers_altitude]

samples/advanced-markers-animation/index.ts

@@ -43,10 +43,15 @@ const intersectionObserver = new IntersectionObserver((entries) => {
 
 async function initMap(): Promise<void> {
     // 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 };
 

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.
 

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<void> {
     // 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[] = [];
 

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();
 

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')!;
 

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';

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, {

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 },

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 = [
         {

samples/build-single.sh

@@ -5,27 +5,45 @@ 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
   # sure, it could be other things, but so far it's not, so we'll keep it simple for now
   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

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')!;

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')!;
 

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')!;
 

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;

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;

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;

samples/deckgl-heatmap/index.ts

@@ -50,8 +50,10 @@ async function initMap(): Promise<void> {
     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) {

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;