importReact,{useState,useRef}from'react';importReactDOMfrom'react-dom/client';import{AdvancedMarker,Map,Pin,APIProvider}from'@vis.gl/react-google-maps';import{PlaceReviews,PlaceDataProvider,PlaceDirectionsButton,IconButton,PlaceOverview,SplitLayout,OverlayLayout,PlacePicker}from'@googlemaps/extended-component-library/react';/** * The below imports are necessary because we are creating refs of * the OverlayLayout and PlacePicker components. You need to pass * the ref property a web component type object. Imports from * @googlemaps/extended-component-library/react are wrappers around * the web components, not the components themselves. For the ref * property we import the actual components and alias them for clarity. */import{OverlayLayoutasTOverlayLayout}from'@googlemaps/extended-component-library/overlay_layout.js';import{PlacePickerasTPlacePicker}from'@googlemaps/extended-component-library/place_picker.js';constAPI_KEY=globalThis.GOOGLE_MAPS_API_KEY??("YOUR_API_KEY");constDEFAULT_CENTER={lat:38,lng:-98};constDEFAULT_ZOOM=4;constDEFAULT_ZOOM_WITH_LOCATION=16;/** * Sample app that helps users locate a college on the map, with place info such * as ratings, photos, and reviews displayed on the side. */constApp=()=>{constoverlayLayoutRef=useRef<TOverlayLayout>(null);constpickerRef=useRef<TPlacePicker>(null);const[college,setCollege]=useState<google.maps.places.Place|undefined>(undefined);/**   * See https://lit.dev/docs/frameworks/react/#using-slots for why   * we need to wrap our custom elements in a div with a slot attribute.   */return(<divclassName="App"><APIProvidersolutionChannel='GMP_devsite_samples_v3_rgmcollegepicker'apiKey={API_KEY}version='beta'><SplitLayoutrowReverserowLayoutMinWidth={700}><divclassName="SlotDiv"slot="fixed"><OverlayLayoutref={overlayLayoutRef}><divclassName="SlotDiv"slot="main"><PlacePickerclassName="CollegePicker"ref={pickerRef}forMap="gmap"country={['us','ca']}type="university"placeholder="Enter a college in the US or Canada"onPlaceChange={()=>{if(!pickerRef.current?.value){setCollege(undefined);}else{setCollege(pickerRef.current?.value);}}}/><PlaceOverviewsize="large"place={college}googleLogoAlreadyDisplayed><divslot="action"className="SlotDiv"><IconButtonslot="action"variant="filled"onClick={()=>overlayLayoutRef.current?.showOverlay()}>SeeReviews</IconButton></div><divslot="action"className="SlotDiv"><PlaceDirectionsButtonslot="action"variant="filled">Directions</PlaceDirectionsButton></div></PlaceOverview></div><divslot="overlay"className="SlotDiv"><IconButtonclassName="CloseButton"onClick={()=>overlayLayoutRef.current?.hideOverlay()}>Close</IconButton><PlaceDataProviderplace={college}><PlaceReviews/></PlaceDataProvider></div></OverlayLayout></div><divclassName="SplitLayoutContainer"slot="main"><Mapid="gmap"mapId="8c732c82e4ec29d9"center={college?.location??DEFAULT_CENTER}zoom={college?.location?DEFAULT_ZOOM_WITH_LOCATION:DEFAULT_ZOOM}gestureHandling="none"fullscreenControl={false}zoomControl={false}>{college?.location &&(<AdvancedMarkerposition={college?.location}><Pinbackground={'#FBBC04'}glyphColor={'#000'}borderColor={'#000'}/></AdvancedMarker>)}</Map></div></SplitLayout></APIProvider></div>);};constroot=ReactDOM.createRoot(document.getElementById('root')!);root.render(<React.StrictMode><App/></React.StrictMode>);
index.tsx

importReact,{useState,useRef}from"react";importReactDOMfrom"react-dom/client";import{AdvancedMarker,Map,Pin,APIProvider,}from"@vis.gl/react-google-maps";import{PlaceReviews,PlaceDataProvider,PlaceDirectionsButton,IconButton,PlaceOverview,SplitLayout,OverlayLayout,PlacePicker,}from"@googlemaps/extended-component-library/react";constAPI_KEY=globalThis.GOOGLE_MAPS_API_KEY??"YOUR_API_KEY";constDEFAULT_CENTER={lat:38,lng:-98};constDEFAULT_ZOOM=4;constDEFAULT_ZOOM_WITH_LOCATION=16;/** * Sample app that helps users locate a college on the map, with place info such * as ratings, photos, and reviews displayed on the side. */constApp=()=>{constoverlayLayoutRef=useRef(null);constpickerRef=useRef(null);const[college,setCollege]=useState(undefined);/**   * See https://lit.dev/docs/frameworks/react/#using-slots for why   * we need to wrap our custom elements in a div with a slot attribute.   */return(<divclassName="App"><APIProvidersolutionChannel="GMP_devsite_samples_v3_rgmcollegepicker"apiKey={API_KEY}version="beta"><SplitLayoutrowReverserowLayoutMinWidth={700}><divclassName="SlotDiv"slot="fixed"><OverlayLayoutref={overlayLayoutRef}><divclassName="SlotDiv"slot="main"><PlacePickerclassName="CollegePicker"ref={pickerRef}forMap="gmap"country={["us","ca"]}type="university"placeholder="Enter a college in the US or Canada"onPlaceChange={()=>{if(!pickerRef.current?.value){setCollege(undefined);}else{setCollege(pickerRef.current?.value);}}}/><PlaceOverviewsize="large"place={college}googleLogoAlreadyDisplayed><divslot="action"className="SlotDiv"><IconButtonslot="action"variant="filled"onClick={()=>overlayLayoutRef.current?.showOverlay()}>SeeReviews</IconButton></div><divslot="action"className="SlotDiv"><PlaceDirectionsButtonslot="action"variant="filled">Directions</PlaceDirectionsButton></div></PlaceOverview></div><divslot="overlay"className="SlotDiv"><IconButtonclassName="CloseButton"onClick={()=>overlayLayoutRef.current?.hideOverlay()}>Close</IconButton><PlaceDataProviderplace={college}><PlaceReviews/></PlaceDataProvider></div></OverlayLayout></div><divclassName="SplitLayoutContainer"slot="main"><Mapid="gmap"mapId="8c732c82e4ec29d9"center={college?.location??DEFAULT_CENTER}zoom={college?.location?DEFAULT_ZOOM_WITH_LOCATION:DEFAULT_ZOOM}gestureHandling="none"fullscreenControl={false}zoomControl={false}>{college?.location &&(<AdvancedMarkerposition={college?.location}><Pinbackground={"#FBBC04"}glyphColor={"#000"}borderColor={"#000"}/></AdvancedMarker>)}</Map></div></SplitLayout></APIProvider></div>);};constroot=ReactDOM.createRoot(document.getElementById("root"));root.render(<React.StrictMode><App/></React.StrictMode>,);
index.jsx

<html>  <head>    <title>React Google Maps - College Picker App</title>    <link rel="stylesheet" type="text/css" href="./style.css" />  </head>  <body>    <div></div>    <script type="module" src="./index"></script>  </body></html>
index.html