googleMaps composable

googleMaps.ts

import { Loader } from '@googlemaps/js-api-loader'

type GeocodeArgs = {
  lat?: number
  lng?: number
  placeId?: string
}

let loader: Loader | null = null

export function useGoogleMaps() {
  function initGoogleMaps() {
    if (loader !== null) return

    loader = new Loader({
      apiKey: import.meta.env.VITE_GOOGLE_MAPS_API_KEY,
      version: 'weekly',
      libraries: ['places', 'geocoding', 'marker', 'maps'],
    })
  }

  async function places(input: string, types = ['address'], language = 'nl', country = 'nl') {
    const { AutocompleteSessionToken, AutocompleteService } = await loader.importLibrary('places')

    const sessionToken = new AutocompleteSessionToken()
    const autocompleteService = new AutocompleteService()

    return await autocompleteService.getPlacePredictions({
      input,
      sessionToken,
      componentRestrictions: {
        country: [ country ],
      },
      language,
      types,
    })
  }

  async function geocode({ lat, lng, placeId }: GeocodeArgs): Promise<google.maps.GeocoderResult[]> {
    const { Geocoder } = await loader.importLibrary('geocoding')

    const geocodingService = new Geocoder()

    const res = await geocodingService.geocode({
      ...((lat !== undefined && lng !== undefined) && { location: new google.maps.LatLng(lat, lng) }),
      placeId,
    })

    return res.results
  }

  return {
    places,
    initGoogleMaps,
    geocode,
    loader,
  }
}