From 1f24ff8004d51f107fcc8b00f375885d0cc7799e Mon Sep 17 00:00:00 2001 From: Sabrina Jodexnis Date: Thu, 8 Dec 2022 18:39:36 +0100 Subject: [PATCH 1/2] chore(index): update google maps types to google.maps --- examples/index.d.ts | 2 +- examples/package.json | 2 +- library/package.json | 2 +- library/src/types/index.d.ts | 2 +- package-lock.json | 25 ++++++++++++------------- tsconfig.json | 2 +- 6 files changed, 17 insertions(+), 18 deletions(-) diff --git a/examples/index.d.ts b/examples/index.d.ts index 3e187d2..5e3ca51 100644 --- a/examples/index.d.ts +++ b/examples/index.d.ts @@ -1,4 +1,4 @@ -declare module 'googlemaps'; +declare module 'google.maps'; /* eslint-disable init-declarations */ declare module '*.module.css' { diff --git a/examples/package.json b/examples/package.json index 44364dd..37114bd 100644 --- a/examples/package.json +++ b/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", diff --git a/library/package.json b/library/package.json index f91dba9..075a2a6 100644 --- a/library/package.json +++ b/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", diff --git a/library/src/types/index.d.ts b/library/src/types/index.d.ts index 3e187d2..5e3ca51 100644 --- a/library/src/types/index.d.ts +++ b/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' { diff --git a/package-lock.json b/package-lock.json index 3d2bd36..dbb3304 100644 --- a/package-lock.json +++ b/package-lock.json @@ -24,7 +24,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", @@ -47,7 +47,7 @@ "version": "2.0.0", "license": "MIT", "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", @@ -3741,11 +3741,10 @@ "integrity": "sha512-EYNwp3bU+98cpU4lAWYYL7Zz+2gryWH1qbdDTidVd6hkiR6weksdbMadyXKXNPEkQFhXM+hVO9ZygomHXp+AIw==", "dev": true }, - "node_modules/@types/googlemaps": { - "version": "3.43.3", - "resolved": "https://registry.npmjs.org/@types/googlemaps/-/googlemaps-3.43.3.tgz", - "integrity": "sha512-ZWNoz/O8MPEpiajvj7QiqCY8tTLFNqNZ/a+s+zTV58wFVNAvvqV4bdGfnsjTb5Cs4V6wEsLrX8XRhmnyYJ2Tdg==", - "deprecated": "Types for the Google Maps browser API have moved to @types/google.maps. Note: these types are not for the googlemaps npm package, which is a Node API.", + "node_modules/@types/google.maps": { + "version": "3.50.5", + "resolved": "https://registry.npmjs.org/@types/google.maps/-/google.maps-3.50.5.tgz", + "integrity": "sha512-RuZf1MJtctGlpW+Gd4a/eGtAufUDjMf+eyN1l+B3fbe2YLScJbg8KEljJfb+6vnSPFAeM1/48geVIEg3vqOkxw==", "dev": true }, "node_modules/@types/istanbul-lib-coverage": { @@ -15542,10 +15541,10 @@ "integrity": "sha512-EYNwp3bU+98cpU4lAWYYL7Zz+2gryWH1qbdDTidVd6hkiR6weksdbMadyXKXNPEkQFhXM+hVO9ZygomHXp+AIw==", "dev": true }, - "@types/googlemaps": { - "version": "3.43.3", - "resolved": "https://registry.npmjs.org/@types/googlemaps/-/googlemaps-3.43.3.tgz", - "integrity": "sha512-ZWNoz/O8MPEpiajvj7QiqCY8tTLFNqNZ/a+s+zTV58wFVNAvvqV4bdGfnsjTb5Cs4V6wEsLrX8XRhmnyYJ2Tdg==", + "@types/google.maps": { + "version": "3.50.5", + "resolved": "https://registry.npmjs.org/@types/google.maps/-/google.maps-3.50.5.tgz", + "integrity": "sha512-RuZf1MJtctGlpW+Gd4a/eGtAufUDjMf+eyN1l+B3fbe2YLScJbg8KEljJfb+6vnSPFAeM1/48geVIEg3vqOkxw==", "dev": true }, "@types/istanbul-lib-coverage": { @@ -15810,7 +15809,7 @@ "@ubilabs/google-maps-react-hooks": { "version": "file:library", "requires": { - "@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", @@ -15832,7 +15831,7 @@ "@ubilabs/google-maps-react-hooks-examples": { "version": "file:examples", "requires": { - "@types/googlemaps": "^3.43.3", + "@types/google.maps": "^3.50.5", "@types/react": "^18.0.21", "@types/react-dom": "^18.0.6", "@ubilabs/google-maps-react-hooks": "*", diff --git a/tsconfig.json b/tsconfig.json index 8c1f72b..deb4e34 100644 --- a/tsconfig.json +++ b/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"}] }, From e79a89e4ef27701e91e865afd0bc65dc724cbb1b Mon Sep 17 00:00:00 2001 From: Sabrina Jodexnis Date: Mon, 12 Dec 2022 09:50:19 +0100 Subject: [PATCH 2/2] fix(examples): update types --- .../distance-matrix-service.tsx | 12 +++++ .../elevation-service/elevation-service.tsx | 33 ++++++++++--- .../geocoding-service/geocoding-service.tsx | 31 +++++++----- .../max-zoom-service/max-zoom-service.tsx | 8 +++- .../places-autocomplete-widget.tsx | 10 +++- .../places-service-with-element.tsx | 12 +++-- .../places-service/places-service.tsx | 48 ++++++++++--------- library/src/hooks/directions-service.ts | 17 +++---- 8 files changed, 116 insertions(+), 55 deletions(-) diff --git a/examples/distance-matrix-service/components/distance-matrix-service/distance-matrix-service.tsx b/examples/distance-matrix-service/components/distance-matrix-service/distance-matrix-service.tsx index 2b9f1cb..9ecfb4f 100644 --- a/examples/distance-matrix-service/components/distance-matrix-service/distance-matrix-service.tsx +++ b/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 = response.originAddresses; const destinations: Array = 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); diff --git a/examples/elevation-service/components/elevation-service/elevation-service.tsx b/examples/elevation-service/components/elevation-service/elevation-service.tsx index 28f887a..ba4e906 100644 --- a/examples/elevation-service/components/elevation-service/elevation-service.tsx +++ b/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}`); } ); } diff --git a/examples/geocoding-service/components/geocoding-service/geocoding-service.tsx b/examples/geocoding-service/components/geocoding-service/geocoding-service.tsx index e7dfdd8..205430b 100644 --- a/examples/geocoding-service/components/geocoding-service/geocoding-service.tsx +++ b/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); } ); } diff --git a/examples/max-zoom-service/components/max-zoom-service/max-zoom-service.tsx b/examples/max-zoom-service/components/max-zoom-service/max-zoom-service.tsx index 5b84af8..7f2d022 100644 --- a/examples/max-zoom-service/components/max-zoom-service/max-zoom-service.tsx +++ b/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 diff --git a/examples/places-autocomplete-widget/components/places-autocomplete-widget/places-autocomplete-widget.tsx b/examples/places-autocomplete-widget/components/places-autocomplete-widget/places-autocomplete-widget.tsx index a33c15e..aa52092 100644 --- a/examples/places-autocomplete-widget/components/places-autocomplete-widget/places-autocomplete-widget.tsx +++ b/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(); diff --git a/examples/places-service-with-element/components/places-service-with-element/places-service-with-element.tsx b/examples/places-service-with-element/components/places-service-with-element/places-service-with-element.tsx index c918234..ab82699 100644 --- a/examples/places-service-with-element/components/places-service-with-element/places-service-with-element.tsx +++ b/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 = () => {

Amazing restaurants in Istanbul

    {placeResults.map((place, index) => { - const name = place.name; + const name = place.name || 'N/A'; const rating = place.rating || 'N/A'; return ( diff --git a/examples/places-service/components/places-service/places-service.tsx b/examples/places-service/components/places-service/places-service.tsx index 045aa8a..160639f 100644 --- a/examples/places-service/components/places-service/places-service.tsx +++ b/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: `${name} is ${isOpenStatus}` - }); + markers.push(marker); - infowindow.open(map, marker); - } + map.fitBounds(bounds.extend(position)); + + const infowindow = new google.maps.InfoWindow({ + position, + content: `${name} is ${isOpenStatus}` + }); + + infowindow.open(map, marker); } } diff --git a/library/src/hooks/directions-service.ts b/library/src/hooks/directions-service.ts index b09306f..4be8fd9 100644 --- a/library/src/hooks/directions-service.ts +++ b/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); } } );