Cannot access this.searchBox from StandaloneSearchBox in react-google-maps/api

Question

I am trying to access the getPlaces() function which should be in the StandaloneSearchBox component from react-google-maps/api. In the documentation and other examples the are using it this way:

function Map() {

 // does not work.
 // Error -> 'this' implicitly has type 'any' because it does not have a type 
 // annotation.ts(2683)
 // index.tsx(22, 10): An outer value of 'this' is shadowed by this container.
 const onPlacesChanged = () => console.log(this.searchBox.getPlaces());

  return (
    <LoadScript
      googleMapsApiKey="YOUR-API-KEY"
      libraries={places}
    >
      <GoogleMap
        mapContainerStyle={containerStyle}
        center={center}
        zoom={zoom}
      >
        { /* Child components, such as markers, info windows, etc. */}
        <>
          <StandaloneSearchBox onPlacesChanged={onPlacesChanged} >
            <input
              type='text'
              placeholder='Customized your placeholder'
              style={{
                boxSizing: 'border-box',
                border: `1px solid transparent`,
                width: `270px`,
                height: `40px`,
                padding: `0 12px`,
                borderRadius: `3px`,
                boxShadow: `0 2px 6px rgba(0, 0, 0, 0.3)`,
                fontSize: `14px`,
                outline: `none`,
                margin: 'center',
                textOverflow: `ellipses`,
                position: 'absolute',
                top: '40px',
                marginLeft: '50%'
              }}
            />
          </StandaloneSearchBox>
        </>
      </GoogleMap>
    </LoadScript>
  )
}

I am trying it this way because it is the only way I manage to get this inside that function:

// ... all the same 

// does not work either, this is a strange object and "searchBox" does not exists in it
function onPlacesChanged(this: any) {
     console.log(this.searchBox.getPlaces())
  }

// ... all the same

But I have problem accessing the searchBox property from this. When I print this it shows a large strange object with properties like `{e3: {…}, gm_bindings: {…}, gm_accessors_: {…}}

Have someone faced this problem before?

In the documentation, the function onPlacesChanged is describe like this:

onPlacesChanged (() => void) | undefined 

Description:    This event is fired when the user selects a query, getPlaces should be used to get new places.

score 6 · Accepted Answer · answered Jun 10 '21 at 23:58

Here are the suggestions on how to make your code work:

I can see that you are using functional component in your code. You can't use this in functional component. You can use the useState instead. Instead of this.searchBox, you can use const [searchBox, setSearchBox] = useState(null);
Once you have the useState, use the onLoad props of your SearchBox to call a function where you put the ref of your Searchbox object to the searchbox state.
In your onPlacesChanged, you can just log the searchBox.getPlaces() to get the result of your getPlaces.

Here's the working code and the code snippet:

/*global google*/
import ReactDOM from 'react-dom';
import React, { useState } from 'react';

import {
  GoogleMap,
  StandaloneSearchBox,
  LoadScript
} from '@react-google-maps/api';
const lib = ['places'];
const center = { lat: 40.756795, lng: -73.954298 };
function Map() {
  const [searchBox, setSearchBox] = useState(null);

  const onPlacesChanged = () => console.log(searchBox.getPlaces());
  const onSBLoad = ref => {
    setSearchBox(ref);
  };

  return (
    <LoadScript
      googleMapsApiKey="YOUR_KEY"
      libraries={lib}
    >
      <GoogleMap
        mapContainerStyle={{ height: '400px', width: '800px' }}
        center={center}
        zoom={12}
      >
        {/* Child components, such as markers, info windows, etc. */}
        <>
          <StandaloneSearchBox
            onPlacesChanged={onPlacesChanged}
            onLoad={onSBLoad}
          >
            <input
              type="text"
              placeholder="Customized your placeholder"
              style={{
                boxSizing: 'border-box',
                border: `1px solid transparent`,
                width: `270px`,
                height: `40px`,
                padding: `0 12px`,
                borderRadius: `3px`,
                boxShadow: `0 2px 6px rgba(0, 0, 0, 0.3)`,
                fontSize: `14px`,
                outline: `none`,
                margin: 'center',
                textOverflow: `ellipses`,
                position: 'absolute',
                top: '40px',
                marginLeft: '50%'
              }}
            />
          </StandaloneSearchBox>
        </>
      </GoogleMap>
    </LoadScript>
  );
}
export default Map;

Hello, How can I focus the searched area on google map? Thanks in advance. — Anwar Hossain, Jun 27 '22 at 10:58

score 0 · Answer 2 · answered May 11 '23 at 15:02

Here is an example of a Map component with Typescript using React 18 and @react-google-maps/api in case anyone needs.

type MapOptions = google.maps.MapOptions
type SearchBox = google.maps.places.SearchBox
type Map = google.maps.Map
type Props = {
  lat: number
  lng: number
}

/**
 * Map component using Google Map API
 * The map is centered at the given lat and lng initially but location can also be updated by searching with the search box
 * @param {number} lat - latitude
 * @param {number} lng - longitude
 * @returns
 */
const Map: React.FC<Props> = ({ lat, lng }) => {
  const mapRef = useRef<Map>()
  const searchBoxRef = useRef<SearchBox>()
  const mapOptions = useMemo<MapOptions>(() => ({}), [])
  const [coordinates, setCoordinates] = React.useState({
    lat,
    lng,
  })

  // Handle event when the map is loaded
  const onLoad = useCallback((map: Map) => {
    mapRef.current = map
  }, [])

  // Handle event when the search box is loaded
  const onSearchBoxLoad = useCallback((searchBox: SearchBox) => {
    searchBoxRef.current = searchBox
  }, [])

  // Handle event when the location is changed
  const onPlacesChanged = () => {
    const searchBox = searchBoxRef.current

    if (!searchBox) return

    // Get the place results from the search box
    const places = searchBox.getPlaces()
    if (!places || places.length === 0) return

    // Get the lat and lng of the first result
    const lat = places[0].geometry?.location?.lat()
    const lng = places[0].geometry?.location?.lng()

    // Set the coordinates state
    if (lat && lng) {
      setCoordinates({ lat, lng })
    }
  }

  return (
    <Box component="div" width="100vw" height="400px">
      <GoogleMap
        zoom={15}
        center={{
          lat: coordinates.lat,
          lng: coordinates.lng,
        }}
        mapContainerClassName="map-container"
        options={mapOptions}
        onLoad={onLoad}
      >
        {/* NOTE - need to use MarkerF for React v18 */}
        <MarkerF
          position={{
            lat: coordinates.lat,
            lng: coordinates.lng,
          }}
        />
        <StandaloneSearchBox
          onLoad={onSearchBoxLoad}
          onPlacesChanged={onPlacesChanged}
        >
          <input
            type="text"
            placeholder="Customized your placeholder"
            style={{
              boxSizing: `border-box`,
              border: `1px solid transparent`,
              width: `240px`,
              height: `32px`,
              padding: `0 12px`,
              borderRadius: `3px`,
              boxShadow: `0 2px 6px rgba(0, 0, 0, 0.3)`,
              fontSize: `14px`,
              outline: `none`,
              textOverflow: `ellipses`,
              position: 'absolute',
              left: '50%',
              marginLeft: '-120px',
            }}
          />
        </StandaloneSearchBox>
      </GoogleMap>
    </Box>
  )
}

To style the GoogleMap component, you just need to add the CSS class and import it in. You also need to load the Google Map API with your key first in the parent component for this to work.

type Props = {
  latitude: number
  longitude: number
}
const SiteMap: React.FC<Props> = ({ latitude, longitude }) => {
  const [libraries] = React.useState<
    ('places' | 'drawing' | 'geometry' | 'localContext' | 'visualization')[]
  >(['places'])
  const { isLoaded } = useLoadScript({
    googleMapsApiKey: 'YOUR_API_KEY',
    libraries,
  })

  if (!isLoaded) return <div>Loading....</div>

  return <Map lat={latitude} lng={longitude} />
}

Cannot access this.searchBox from StandaloneSearchBox in react-google-maps/api

2 Answers2