How to add a search field which acceps postal code / place and returns suggestions?

[jakubbokwa-datrycs]

Hi, I have decided to go with the react-google-maps solution to render a map with pins and so far I am very happy with it :)
I tried implementing some simple search box but I can't get it right, it seems. I started with the code from one of the examples and tried extending the APIProvider by the 'places' library as follows:
<APIProvider apiKey={API_KEY} libraries={["places", "marker"]}>
but

1. I don't know what the next step would be,
2. I keep getting this error in the console: "Google Maps Places library is missing. Please add the places library to the props of the <ApiProvider> component."

I also tried pasting this code snippet to my codebase but the error I mentioned beforehand occurs and I can't seem to get past it.
https://visgl.github.io/react-google-maps/docs/api-reference/hooks/use-autocomplete#return-value

Any help would be greatly appreciated. I am not very proficient in Google Maps API but I will keep on trying to get it right.

[usefulthink]

Have a look here: #160 (comment)

(TL;DR: I don't like having the useAutocomplete() hook here and it will be replaced by an example implementation that you can then copy into your project. That will be ready in the next few days, but maybe the code snippets in the linked comment help you along)

[usefulthink]

@mrMetalWood is working on it, but he's out of office today, so maybe monday?

[benderlidze]

Hey
I created this TypeScript version based on your example and it works for me. Perhaps it will be useful to someone else.

import React, { ChangeEvent, useCallback, useEffect, useState } from "react";
import { useMapsLibrary } from "@vis.gl/react-google-maps";

export const AutocompletePlaces = () => {
  const placesLibrary = useMapsLibrary("places");
  const [service, setService] =
    useState<google.maps.places.AutocompleteService | null>(null);
  const [results, setResults] = useState<
    google.maps.places.QueryAutocompletePrediction[] | null
  >([]);
  const [inputValue, setInputValue] = useState<string>("");

  useEffect(() => {
    if (placesLibrary) setService(new placesLibrary.AutocompleteService());
    return () => setService(null);
  }, [placesLibrary]);

  const updateResults = (inputValue: string) => {
    if (!service || inputValue.length === 0) {
      setResults([]);
      return;
    }
    const request = { input: inputValue };
    service.getQueryPredictions(request, (res) => {
      setResults(res);
    });
  };

  const onInputChange = (ev: ChangeEvent<HTMLInputElement>) => {
    const value = ev.target.value;
    setInputValue(value);
    updateResults(value);
  };

  const handleSelectedPlace = (
    place: google.maps.places.QueryAutocompletePrediction
  ) => {
    setInputValue(place.description);
    setResults([]);
  };

  if (!service) return null;

  return (
    <div className="max-w-96">
      <input
        className="p-2 rounded-xl border border-gray-300 w-full focus:outline-none focus:border-gray-500 transition-all duration-200 ease-in-out"
        value={inputValue}
        onChange={onInputChange}
      />
      {results && results.length > 0 && (
        <ul className="bg-white mt-2">
          {results.map((place) => (
            <li
              className="cursor-pointer whitespace-nowrap p-1 hover:bg-slate-100 overflow-hidden"
              key={place.place_id}
              onClick={() => handleSelectedPlace(place)}
            >
              {place.description}
            </li>
          ))}
        </ul>
      )}
    </div>
  );
};

[zos224]

Hi @benderlidze
I have implement my code like you but I don't know while my placesLibrary always null. The map is showing but autocomplete not working. You have any idea?
Thanks

[usefulthink]

If useMapsLibrary("places") always returns null, there is something wrong. Do you have by any chance the <APIProvider> inside the component where you're using it?

[zos224]

Thanks for your reply.
I have APIProvider in the return of same component, I'm using it to show the map.