PlacePicker onPlaceChange does not work as expected

[EthanChen39]

Environment details

• Framework: NextJS 14
• Language: TypeScript
• Library Version: @googlemaps/extended-component-library": "^0.6.11

I was following the library tutorial here - link and copied the code, but it does not work as expected. For the onPlaceChange function, it does not have the "value" attribute. I am not sure how I can retrieve the formattedAddress value from the event. Any help is appreciated!

Steps to reproduce

1. Create a next js project.
2. Install @googlemaps/extended-component-library": "^0.6.11.
3. Create a component with the code below

Code example

"use client";

import {
  APILoader,
  PlacePicker,
} from "@googlemaps/extended-component-library/react";

export default function MyPicker() {
  return (
    <div className="p-5">
      <APILoader
        apiKey="<YOUR-API-KEY>"
        solutionChannel="GMP_GCC_placepicker_v1"
      />
      <PlacePicker
        country={["us", "ca"]}
        location-bias="49.28273,-123.12074" // search results biased towards "Vancouver, BC"
        radius={2000}
        className="w-2/5"
        placeholder="Enter city name e.g. Vancouver, BC"
        onPlaceChange={(e) => {
          // e.target. // This line does not work as expected
        }}
      />
    </div>
  );
}

Stack trace

N.A

[leafsy]

Hi @EthanChen39 I'm having trouble reproducing the issue. Here's a sample nextjs project that uses the Place Picker; mind checking if this is working as expected? Note that the value property will only be defined after user selects a place result from the dropdown.

[Juneezee]

@EthanChen39 Use (e.target as PlacePickerType).value

    <PlacePicker
      onPlaceChange={(e: Event): void => {
        const newPlace = (e.target as PlacePickerType).value;
        console.log(newPlace);
      }}
    />

[HMubaireek]

This is a working solution:

  const handlePlaceChange = (event: Event) => {
    const eventValue = (event.target as HTMLSelectElement).value;
    const place = eventValue as unknown as google.maps.places.Place;
    const latLng = place.location;
    const coordinates = { lat: latLng.lat(), lng: latLng.lng() };
};