GoogleMapsで検索する（javascript）

@react-google-maps/apiを利用する前提で以下を書きます。

検索UIを作成する場合、StandaloneSearchBoxコンポーネントを利用できますが、こちらを利用した場合、検索対象のlocationやradiusを絞るなどの渡すパラメータを制御する方法がわかりません。引数にも渡せなさそうなので無理なのか？

<StandaloneSearchBox
    onLoad={onSearchBoxLoad}
    onPlacesChanged={onPlacesChanged}
>
    <input
        type="text"
        placeholder="Search"
    />
</StandaloneSearchBox>

react-google-maps-api/packages/react-google-maps-api/src/components/places/StandaloneSearchBox.tsx at 0bd9291dfefb5fe57cd98fdeb7331532fe88410f · JustFly1984/react-google-maps-api

ReactGoogleMapsAPI.ContributetoJustFly1984/react-google-maps-apidevelopmentbycreatinganaccountonGitHub.

実際問題、google maps apiにはnearby search, text search, find placeなどがあり、もっと汎用的に検索できるはずです。

Place Search | Places API | Google for Developers

const center = googleMap.current.getCenter()
const service = new google.maps.places.PlacesService(googleMap.current)

service.nearbySearch(
    {
    location: center,
    radius: 5000,
    name: keyword,
    },
    callback,
)

service.textSearch(
    {
    query: keyword,
    location: center,
    radius: 5000,
    },
    callback,
)

service.findPlaceFromQuery(
    {
    query: keyword,
    fields: ['name', 'formatted_address', 'geometry'],
    locationBias: center,
    },
    callback,
)

function callback(
  result: google.maps.places.PlaceResult[] | null,
  status: google.maps.places.PlacesServiceStatus,
  // _pagenation: google.maps.places.PlaceSearchPagination | null,
) {
  if (status !== google.maps.places.PlacesServiceStatus.OK) return

  // resultを使って処理
}

ライブラリをインポートしていればwindowにgoogleプロパティが生えているはずですので、places serviceをnewして後は好きなように検索します。

個人的におすすめはtext searchです。
理由はfind place の場合は一致した1件しか結果を返さないのに対し、
text/nearby searchは曖昧検索した結果を返してきます。

加えて、nearby searchの場合はlocationとradius近傍の検索を優先するため、例えば東北近辺で「名古屋」などと検索しても碌な検索結果がヒットしません。（名古屋市などがヒットせず、店名などに名古屋要素のない謎のお店等がヒットする）

一方でtext searchの場合は指定したlocationから遠方の場合であっても名古屋市などが検索結果に現れ、意図した検索結果を得られやすいです。