Comments (20)
Drop this as a child of GoogleMaps:
<SearchBox
placeholder={"123 anywhere st."}
onPlacesChanged={this.handleSearch} />
and you'll probably have to change the top bit to something like this:
...
import PropTypes from 'prop-types';
export default class SearchBox extends React.Component {
static propTypes = {
placeholder: PropTypes.string,
onPlacesChanged: PropTypes.func
}
render() {
return <input ref="input" placeholder={this.props.placeholder} type="text"/>;
}
...
from google-map-react.
It would be great to have @aphsai 's example of usage included in the main docs for Search Box. Not sure if this is the place to request it or not.
from google-map-react.
Getting Uncaught TypeError: this.searchBox.removeListener is not a function
here. Any ideas why?
from google-map-react.
I'm getting the exact same error as @matejstrasek
from google-map-react.
Looks like that will work perfectly 😄
You can see here that google-map-react
checks if the base api is already loaded, and if so, uses it. So it won't accidentally load a second copy of the library.
from google-map-react.
@jedwards1211 How do I place the SearchBox
on a layer above the map? Right now the SearchBox
will be dragged when the map is dragged then it'll reposition itself.
Thanks
from google-map-react.
@kjg531 @matejstrasek @raphaguasta whoops, I made the wrong assumptions about the Google Maps API, because the way you remove listeners in it is very nonstandard. This should work although I haven't tested it:
componentDidMount() {
var input = React.findDOMNode(this.refs.input);
this.searchBox = new google.maps.places.SearchBox(input);
this.searchBoxListener = this.searchBox.addListener('places_changed', this.onPlacesChanged);
}
componentWillUnmount() {
google.maps.event.removeListener(this.searchBoxListener);
}
from google-map-react.
It doesn't look like it's an existing option. However, it shouldn't be difficult to accomplish now, without waiting for changes to this library.
<GoogleMap/>
doesn't provide access to the internals to do this:
map.controls[google.maps.ControlPosition.TOP_LEFT].push(input);
But, that's just layout, you could easily mount the search field on a layer above the map and absolute position it to the right place.
To use the Gmaps search box in a React component would be easy (i'm not sure off the top of my head how to make sure google.maps.places
is in the namespace though):
import React from 'react';
export default class SearchBox extends React.Component {
static propTypes = {
placeholder: React.PropTypes.string,
onPlacesChanged: React.PropTypes.func
}
render() {
return <input ref="input" {...this.props} type="text"/>;
}
onPlacesChanged = () => {
if (this.props.onPlacesChanged) {
this.props.onPlacesChanged(this.searchBox.getPlaces());
}
}
componentDidMount() {
var input = React.findDOMNode(this.refs.input);
this.searchBox = new google.maps.places.SearchBox(input);
this.searchBox.addListener('places_changed', this.onPlacesChanged);
}
componentWillUnmount() {
this.searchBox.removeListener('places_changed', this.onPlacesChanged);
}
}
from google-map-react.
That actually worked brilliantly (with minor syntax changes), thank you very much. However, in order to make this work:
this.searchBox = new google.maps.places.SearchBox(input);
I had to add in the index.html for my app:
<script type="text/javascript" src="https://maps.google.com/maps/api/js?libraries=places&sensor=false"></script>
Any ideas how to properly import it in the namespace? Is the places library already included somewhere in google-map-react or does it need a separate installation?
from google-map-react.
Alright, i'll leave like that, then. Thanks again. Maybe this could be added as an example here?
Anyways, this can be closed now.
from google-map-react.
I'm getting the exact same error as @matejstrasek +1
from google-map-react.
@istarkov do you have any idea how to put the SearchBox
on a layer above the map, like @hafizio is asking? Unfortunately I don't really use this library anymore.
I think using new google.maps.places.SearchBox
on a React ref
was probably bad advice, since it would move the input away from where React expects it to be...probably best to do whatever one would do with just the Gmaps API and no React, and then possibly update the input in the render
method
from google-map-react.
I just use geo api services directly, with react-select and similar controls. There is no need to couple map and search service.
from google-map-react.
Ps: I even have no idea about what SearchBox this discussion :-)
from google-map-react.
Hi,
The search box works great.
Question: How can I do to update the map location and put a place mark on the selected location from the search box?
@istarkov thanks for this awesome project.
from google-map-react.
OH, my bad I see the
onPlacesChanged: PropTypes.func
from google-map-react.
Can anyone provide a full example of how to implement the search box please? The SearchBox component plus the GoogleMaps component? I don't understand how to tie them together.
from google-map-react.
@aphsai this is great. Thank you!!
from google-map-react.
@taylorj91 Yes, you can create an issue and request that, and we will add it to google-map-react-examples!
from google-map-react.
@aphsai thanks!!
from google-map-react.
Related Issues (20)
- Google map suddenly stopped loading, white screen appears. HOT 1
- Map Pins are not positioned correctly after zoom or pan HOT 12
- Fitbounds and directionService is not updating markers on the map HOT 1
- Unhandled Promise Rejection: TypeError: undefined is not an object (evaluating 'm.nB')
- Card with address on upper left corner
- drag the map when we hover on div card outside the map and it show the that particular marker if marker is hide on centre coardinates HOT 1
- Google together with Visgl and OpenJS has released the official react components for Google maps HOT 4
- need to detect getVisible StreetViewService
- BBC – account overview
- User:Meta-Horizon - Meta
- AdvancedMarkerElement HOT 1
- About Open Source Summit | LF Events
- Microsoft Power BI Data Analyst
- Main Page - Meta
- Check out "TikTok"
- #
- Creating a map marker with visgl library
- React.StrictMode throws warning because of findDOMNode use
- React 18 StrictMode: Markers incorrectly positioned HOT 1
- Error: ENOENT: no such file or directory, open @googlemaps\src\index.ts
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 google-map-react.