Places Service without a Map object?

[ldobrovic]

Hello,

I'm curious about if it is possible to create a Places service (in order to get Place details) without also creating a Map component? Like how you can create an Autocomplete service just from using the useMapsLibrary() hook. I'm trying to build a places autocomplete without any maps functionality, and so I want to make sure that by mounting a Map component I'm not bloating my app and/or running up my API billing.

Thanks!

[usefulthink]

Yes, that won't be a problem at all. If you don't use the <Map> component, there'll also be no google.maps.Map instance created and no cost for your account.

You can just build your component using useMapsLibrary('places') and use it without a map. The APIProvider is still required though.

[usefulthink]

This one is actually quick to explain: You're using the useMapsLibrary() hook outside of the API provider, where the context required for the hooks hasn't yet been established. If you put the InputGroup and the hook into a component (e.g. AutocompleteInput).

And exactly this is one of the two examples in our readme :)

[davideluque]

Thank you @usefulthink my bad for not spotting this on the README

[yosiaLukumai]

Thanks so much @usefulthink @davideluque

[yosiaLukumai]

Also another issue I am facing, is that autocomplete works fine but everytime it uses api place , not the new api place, even if I have enabled new place api, when I disable the api place and allow the new place api only the request fails, is there a way to make this use new place api instead of last one ,here is my code

import { useEffect, useState, useCallback } from 'react'
import { useMap, useMapsLibrary } from '@vis.gl/react-google-maps'
import { Check, ChevronsUpDown } from 'lucide-react'

import { cn } from "@/lib/utils"
import { Button } from "@/components/ui/button"
import {
    Command,
    CommandEmpty,
    CommandGroup,
    CommandInput,
    CommandItem,
    CommandList,
} from "@/components/ui/command"
import {
    Popover,
    PopoverContent,
    PopoverTrigger,
} from "@/components/ui/popover"
import { useHubLocation } from '@/contexts/useHubLoc'

interface Props {
    onPlaceSelect: (place: google.maps.places.PlaceResult | null) => void;
    mapInstanceReq: boolean;
    mapId: string;
    attributionDiv: React.RefObject<HTMLDivElement>;
}

export function PlaceSearch({ onPlaceSelect, mapInstanceReq, attributionDiv, mapId }: Props) {

    const map = useMap(mapId)
    const { selectedHub } = useHubLocation()
    const places = useMapsLibrary('places')

    const [open, setOpen] = useState(false)
    const [value, setValue] = useState<string>("")

    const [sessionToken, setSessionToken] = useState<google.maps.places.AutocompleteSessionToken | null>(null)
    const [autocompleteService, setAutocompleteService] = useState<google.maps.places.AutocompleteService | null>(null)
    const [placesService, setPlacesService] = useState<google.maps.places.PlacesService | null>(null)
    const [predictionResults, setPredictionResults] = useState<Array<google.maps.places.AutocompletePrediction>>([])
    const [fetchingData, setFetchingData] = useState<boolean>(false)

    useEffect(() => {
        if (!places) return
        try {
            setAutocompleteService(new places.AutocompleteService())

            if (mapInstanceReq) {
                if (map) {
                    setPlacesService(new places.PlacesService(map))
                }
            } else {
                if (attributionDiv.current) {
                    setPlacesService(new places.PlacesService(attributionDiv.current))
                }
            }

            setSessionToken(new places.AutocompleteSessionToken())
        } catch (error) {
            console.error('Error initializing Google Maps services:', error)
        }

        return () => {
            setAutocompleteService(null)
            setPlacesService(null)
            setSessionToken(null)
        }
    }, [map, places])

    const fetchPredictions = useCallback(async (inputValue: string) => {
        if (!autocompleteService || !sessionToken || !inputValue) {
            setPredictionResults([])
            return
        }

        setFetchingData(true)

        try {
            const request = {
                input: inputValue, sessionToken,
                locationBias: selectedHub?.cordinateCenter,
                region: "tz",
                componentRestrictions: { country: ["tz"] },
            }
            const response = await autocompleteService.getPlacePredictions(request)
            setPredictionResults(response.predictions || [])
        } catch (error) {
            console.error('Error fetching predictions:', error)
            setPredictionResults([])
        } finally {
            setFetchingData(false)
        }
    }, [autocompleteService, sessionToken])

    const onInputChange = useCallback((newValue: string) => {
        setValue(newValue)
        if (newValue.trim()) {
            fetchPredictions(newValue)
        } else {
            setPredictionResults([])
        }
    }, [fetchPredictions])

    const onSelect = useCallback((placeId: string) => {
        if (!places || !placesService || !sessionToken) return
        setFetchingData(true)
        const detailRequestOptions = {
            placeId: placeId,
            fields: ['geometry', 'name', 'formatted_address'],
            sessionToken,
        }

        placesService.getDetails(detailRequestOptions, (placeDetails, status) => {
            if (status === google.maps.places.PlacesServiceStatus.OK && placeDetails) {
                onPlaceSelect(placeDetails)
                setValue(placeDetails.name || '')
                setSessionToken(new places.AutocompleteSessionToken())
            } else {
                console.error('Error fetching place details:', status)
                onPlaceSelect(null)
            }
            setOpen(false)
            setFetchingData(false)
        })
    }, [onPlaceSelect, places, placesService, sessionToken])

    return (
        <Popover open={open} onOpenChange={setOpen}>
            <PopoverTrigger asChild>
                <Button
                    variant="outline"
                    role="combobox"
                    aria-expanded={open}
                    className="w-full justify-between"
                >
                    {value || "Search for a place..."}
                    <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
                </Button>
            </PopoverTrigger>
            <PopoverContent className="w-[300px] p-0">
                <Command>
                    <CommandInput
                        placeholder="Search for a place..."
                        value={value}
                        onValueChange={onInputChange}
                    />
                    <CommandEmpty>{fetchingData ? "Loading..." : "No places found."}</CommandEmpty>
                    <CommandGroup>
                        <CommandList>
                            {predictionResults.map((result) => (
                                <CommandItem
                                    key={result.place_id}
                                    value={result.description}
                                    onSelect={() => onSelect(result.place_id)}
                                >
                                    <Check
                                        className={cn(
                                            "mr-2 h-4 w-4",
                                            value === result.description ? "opacity-100" : "opacity-0"
                                        )}
                                    />
                                    {result.description}
                                </CommandItem>
                            ))}
                        </CommandList>
                    </CommandGroup>
                </Command>
            </PopoverContent>
        </Popover>
    )
}

[usefulthink]

The new Places API uses completely different classes in the Maps JavaScript API.

For Autocomplete, you have to use the new google.maps.places.AutocompleteSuggestion instead of the google.maps.places.AutocompleteService; for Places search, you need to use the new google.maps.places.Place class.

The new APIs are similar, but not identical.
There are migration guides available in the official documentation.