Comments (4)
That's not exactly what the example does. The example uses the onLoad property. We don't support the ref property. You can set your ref in the onLoad callback
from react-google-maps-api.
Thanks for the example. I agree the fact that the example uses a class instance variable is a bit misleading. onLoad indeed can't be used with React.useRef since the resulting google maps instance isn't a dom node.
Maybe we shouldn't call the variable ref, that way it's more clear
from react-google-maps-api.
For those who are searching for the same issue.
Here is the code that works with Typescript. I can't use the code from example.
const [searchBox, setSearchBox] = React.useState<google.maps.places.SearchBox>({} as google.maps.places.SearchBox);
const OnMapSearchBoxPlaceChanged = ()=> {
if(searchBox != null){
var places = searchBox.getPlaces();
if (places.length == 0) {
return;
}
console.log(places.length);
}
}
<StandaloneSearchBox
onLoad={ref => setSearchBox(ref)}
onPlacesChanged={OnMapSearchBoxPlaceChanged}
>
<input
type="text"
placeholder="Search"
className="search-box"
/>
</StandaloneSearchBox>
from react-google-maps-api.
@michaelsync , @uriklar , @JustFly1984 :
I tried the code posted here and that example but they don't work, they give the following error:
You could post an example of a working code on codesandbox.
from react-google-maps-api.
Related Issues (20)
- Docs link broken HOT 3
- Marker will be discontinued on February 21, 2024. Please use google.maps.marker.AdvancedMarkerElement instead. For more information about the end of support, please visit https://developers.google.com/maps/deprecations. HOT 14
- Marker Icon Misalignment with Custom SVG Path in @react-google-maps/api
- 21st, 2024, google.maps.Marker is deprecated. HOT 7
- Docs website seems to be down HOT 5
- documentation website become gambling ads HOT 1
- README netlify link is showing scam games HOT 1
- Strange behavior of the information window HOT 2
- Can not obtain the paths from the <Polygon> component. HOT 1
- DoubleClick is not working when mouseup event call
- Autocomplete results show after enter N(number) character
- Update Dependencie @types/google.maps HOT 3
- MarkerF icon hover
- setEditable: not a LatLng or LatLngLiteral: in property lat: not a number
- Page on netlify is broken, can't see docs HOT 1
- @react-google-maps/api in this package i need to send the session token in autocomplete but it will not be have any other props HOT 1
- Hiding certain region in map
- Security Alert: Polyfill.io Compromise Affecting Google Maps Platform Integration HOT 3
- ls
- [QUESTION] How to repeat or to limit height of google maps background inside div ? HOT 2
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from react-google-maps-api.