chore(index): update google maps types to google.maps

examples/distance-matrix-service/components/distance-matrix-service/distance-matrix-service.tsx

@@ -63,6 +63,10 @@ const DistanceMatrixService = () => {
 
     // Get distance matrix response
     service.getDistanceMatrix(request, response => {
+      if (!response) {
+        return;
+      }
+
       const origins: Array<string> = response.originAddresses;
       const destinations: Array<string> = response.destinationAddresses;
       const responseElements = response.rows[0].elements;
@@ -72,6 +76,10 @@ const DistanceMatrixService = () => {
 
       // Geocode the response to set a marker at the positions of the origin and the destinations
       geocoder.geocode({address: origins[0]}, results => {
+        if (!results) {
+          return;
+        }
+
         const position = results[0]?.geometry.location;
 
         // Add another marker icon for the origin
@@ -82,6 +90,10 @@ const DistanceMatrixService = () => {
 
       destinations.forEach(destination => {
         geocoder.geocode({address: destination}, results => {
+          if (!results) {
+            return;
+          }
+
           const position = results[0]?.geometry.location;
 
           createMarker(position);

examples/elevation-service/components/elevation-service/elevation-service.tsx

@@ -31,20 +31,41 @@ const ElevationService = () => {
     const clickListener = map.addListener(
       'click',
       (mapsMouseEvent: google.maps.MapMouseEvent) => {
+        const {latLng} = mapsMouseEvent;
+
+        if (!latLng) {
+          return;
+        }
+
         // Update infowindow with new position and elevation info
-        infoWindow.setPosition(mapsMouseEvent.latLng);
+        infoWindow.setPosition(latLng);
 
         // Retrieve elevation info from elevator
         elevator.getElevationForLocations(
-          {locations: [mapsMouseEvent.latLng]},
-          (results: google.maps.ElevationResult[]) => {
+          {locations: [latLng]},
+          (
+            results: google.maps.ElevationResult[] | null,
+            status: google.maps.ElevationStatus
+          ) => {
+            if (status !== google.maps.ElevationStatus.OK || !results) {
+              console.error(status);
+
+              return;
+            }
+
+            const {location, elevation} = results[0];
+
+            if (!location || !elevation) {
+              return;
+            }
+
             // eslint-disable-next-line no-console
             console.log(results);
 
-            map.setCenter(results[0].location);
+            map.setCenter(location);
 
-            infoWindow.setPosition(results[0].location);
-            infoWindow.setContent(`Elevation: ${results[0].elevation}`);
+            infoWindow.setPosition(location);
+            infoWindow.setContent(`Elevation: ${elevation}`);
           }
         );
       }

examples/geocoding-service/components/geocoding-service/geocoding-service.tsx

@@ -63,25 +63,30 @@ const GeocodingService = () => {
         geocoder?.geocode(
           {location: mapsMouseEvent.latLng},
           (
-            results: google.maps.GeocoderResult[],
+            results: google.maps.GeocoderResult[] | null,
             status: google.maps.GeocoderStatus
           ) => {
-            if (status === 'OK') {
-              const position = results[0].geometry.location;
-              const formattedAddress = results[0].formatted_address;
+            if (status !== 'OK' || !results) {
+              console.error(
+                `Geocoding was not successful for the following reason: ${status}`
+              );
 
-              marker.setPosition(position);
+              return;
+            }
 
-              infoWindow.setPosition(position);
-              infoWindow.setContent(formattedAddress);
+            const position = results[0].geometry.location;
+            const formattedAddress = results[0].formatted_address;
 
-              map.setCenter(results[0].geometry.location);
-            } else {
-              // eslint-disable-next-line no-console
-              console.log(
-                `Geocode was not successful for the following reason: ${status}`
-              );
+            if (!position || !formattedAddress) {
+              return;
             }
+
+            marker.setPosition(position);
+
+            infoWindow.setPosition(position);
+            infoWindow.setContent(formattedAddress);
+
+            map.setCenter(results[0].geometry.location);
           }
         );
       }

examples/index.d.ts

@@ -1,4 +1,4 @@
-declare module 'googlemaps';
+declare module 'google.maps';
 
 /* eslint-disable init-declarations */
 declare module '*.module.css' {

examples/max-zoom-service/components/max-zoom-service/max-zoom-service.tsx

@@ -31,8 +31,14 @@ const MaxZoomService = () => {
 
     // Function to show the maximum zoom level of a location
     const showMaxZoomLevel = (event: google.maps.MapMouseEvent) => {
+      const {latLng} = event;
+
+      if (!latLng) {
+        return;
+      }
+
       maxZoomService.getMaxZoomAtLatLng(
-        event.latLng,
+        latLng,
         (result: google.maps.MaxZoomResult) => {
           if (result.status !== 'OK') {
             // eslint-disable-next-line no-console

examples/package.json

@@ -32,7 +32,7 @@
     "react-dom": "^18.2.0"
   },
   "devDependencies": {
-    "@types/googlemaps": "^3.43.3",
+    "@types/google.maps": "^3.50.5",
     "@types/react": "^18.0.21",
     "@types/react-dom": "^18.0.6",
     "cross-env": "^7.0.3",

examples/places-autocomplete-widget/components/places-autocomplete-widget/places-autocomplete-widget.tsx

@@ -16,7 +16,15 @@ const PlacesAutocompleteWidget = () => {
   const onPlaceChanged = (place: google.maps.places.PlaceResult) => {
     if (place) {
       setSelectedPlace(place);
-      setInputValue(place.formatted_address || place.name);
+
+      const formattedAddress = place.formatted_address;
+      const {name} = place;
+
+      if (!formattedAddress || !name) {
+        return;
+      }
+
+      setInputValue(formattedAddress || name);
 
       // Keep focus on input element
       inputRef.current?.focus();

examples/places-service-with-element/components/places-service-with-element/places-service-with-element.tsx

@@ -33,12 +33,16 @@ const PlacesServiceElement = () => {
     };
 
     function callback(
-      results: google.maps.places.PlaceResult[],
+      results: google.maps.places.PlaceResult[] | null,
       status: google.maps.places.PlacesServiceStatus
     ) {
-      if (status === google.maps.places.PlacesServiceStatus.OK) {
-        setPlaceResults(results);
+      if (status !== google.maps.places.PlacesServiceStatus.OK || !results) {
+        console.error(status);
+
+        return;
       }
+
+      setPlaceResults(results);
     }
 
     service.nearbySearch(request, callback);
@@ -50,7 +54,7 @@ const PlacesServiceElement = () => {
         <h1>Amazing restaurants in Istanbul</h1>
         <ul className={styles.restaurantList}>
           {placeResults.map((place, index) => {
-            const name = place.name;
+            const name = place.name || 'N/A';
             const rating = place.rating || 'N/A';
 
             return (

examples/places-service/components/places-service/places-service.tsx

@@ -24,37 +24,41 @@ const PlacesService = () => {
     };
 
     function callback(
-      results: google.maps.places.PlaceResult[],
+      results: google.maps.places.PlaceResult[] | null,
       status: google.maps.places.PlacesServiceStatus
     ) {
-      if (status === google.maps.places.PlacesServiceStatus.OK) {
-        for (let index = 0; index < results.length; index++) {
-          const name = results[index].name;
-          const position = results[index].geometry?.location;
-          const openingHours = results[index].opening_hours;
+      if (status !== google.maps.places.PlacesServiceStatus.OK || !results) {
+        console.error(status);
 
-          const isOpenStatus = openingHours ? 'open' : 'closed';
+        return;
+      }
 
-          if (!map || !position) {
-            return;
-          }
+      for (let index = 0; index < results.length; index++) {
+        const name = results[index].name;
+        const position = results[index].geometry?.location;
+        const openingHours = results[index].opening_hours;
 
-          const marker = new google.maps.Marker({
-            map,
-            position
-          });
+        const isOpenStatus = openingHours ? 'open' : 'closed';
 
-          markers.push(marker);
+        if (!map || !position) {
+          return;
+        }
 
-          map.fitBounds(bounds.extend(position));
+        const marker = new google.maps.Marker({
+          map,
+          position
+        });
 
-          const infowindow = new google.maps.InfoWindow({
-            position,
-            content: `<b>${name}</b> is ${isOpenStatus}`
-          });
+        markers.push(marker);
 
-          infowindow.open(map, marker);
-        }
+        map.fitBounds(bounds.extend(position));
+
+        const infowindow = new google.maps.InfoWindow({
+          position,
+          content: `<b>${name}</b> is ${isOpenStatus}`
+        });
+
+        infowindow.open(map, marker);
       }
     }
 

library/package.json

@@ -36,7 +36,7 @@
     "react": ">=16.8.0"
   },
   "devDependencies": {
-    "@types/googlemaps": "^3.43.3",
+    "@types/google.maps": "^3.50.5",
     "@types/react": "^18.0.21",
     "@typescript-eslint/eslint-plugin": "^5.40.0",
     "@typescript-eslint/parser": "^5.40.0",

library/src/hooks/directions-service.ts

@@ -76,13 +76,13 @@ export const useDirectionsService = (
           directionsService.route(
             request,
             (
-              result: google.maps.DirectionsResult,
+              result: google.maps.DirectionsResult | null,
               status: google.maps.DirectionsStatus
             ): void => {
-              if (status === google.maps.DirectionsStatus.OK) {
-                resolve(result);
-              } else {
+              if (status !== google.maps.DirectionsStatus.OK || !result) {
                 reject(status);
+              } else {
+                resolve(result);
               }
             }
           );
@@ -101,16 +101,17 @@ export const useDirectionsService = (
           directionsService.route(
             request,
             (
-              result: google.maps.DirectionsResult,
+              result: google.maps.DirectionsResult | null,
               status: google.maps.DirectionsStatus
             ): void => {
-              if (status === google.maps.DirectionsStatus.OK) {
+              if (status !== google.maps.DirectionsStatus.OK || !result) {
+                reject(status);
+              } else {
                 if (directionsRenderer) {
                   directionsRenderer.setDirections(result);
                 }
+
                 resolve(result);
-              } else {
-                reject(status);
               }
             }
           );

library/src/types/index.d.ts

@@ -1,4 +1,4 @@
-declare module 'googlemaps';
+declare module 'google.maps';
 
 /* eslint-disable init-declarations */
 declare module '*.module.css' {

tsconfig.json

@@ -8,7 +8,7 @@
     "lib": ["es2015", "dom"],
     "jsx": "react",
     "esModuleInterop": true,
-    "types": ["node", "googlemaps"],
+    "types": ["node", "google.maps"],
     "moduleResolution": "node",
     "plugins": [{"name": "typescript-plugin-css-modules"}]
   },