React-google-maps: SearchBox: filter countries
Hi. Currently, I can't filter by countries in the searchBox component. I need to show the address from one specific country. The prop "bounds" only limit the first resuts, but if there is not a result from the specific country, then this shows the address form others countries. The component has something like this? https://developers.google.com/maps/documentation/javascript/examples/places-autocomplete-multiple-countries
autocomplete.setComponentRestrictions({'country': ['us', 'pr', 'vi', 'gu', 'mp']});
matias89
All 10 comments
No. Feel free to PR.
tomchentw
on 6 Jul 2017
I kinda made it work. I added a normal input with an ID inside the Map component (but you can place it wherever you want), but I'm not using the SearchBox component anymore.
componentDidMount() {
// This interval is to check when the map is completely loaded
const interval = window.setInterval(() => {
if (this.map) {
const input = document.getElementById("searchInputControl");
this.autocomplete = new google.maps.places.Autocomplete(input);
this.autocomplete.setComponentRestrictions({ country: 'au' });
this.autocomplete.addListener('place_changed', this.handleSearchBoxPlacesChanged)
window.clearInterval(interval);
}
}, 500)
}
handleSearchBoxPlacesChanged = () => {
const place = this.autocomplete.getPlace();
}
And the input component:
<GoogleMap>
<input
id="searchInputControl"
style={{ width: '250px', marginTop: 9, position: 'absolute', top: 0, left: 130 }}
placeholder="Find an address..."
/>
</GoogleMap>
rafaelgrilli92
on 17 Jan 2018
@rafaelgrilli92 can you send me github link of your code
sairarif
on 21 Feb 2018
@sairarif it's a company project, so it's private. What do you want to know exactly? I can try to help you.
rafaelgrilli92
on 21 Feb 2018
I want to apply filter on google map on my data
like i want to filter region wise resellers and agents using filters
From: Rafael Grilli notifications@github.com
Sent: Wednesday, February 21, 2018 12:42 PM
To: tomchentw/react-google-maps
Cc: sairarif; Mention
Subject: Re: [tomchentw/react-google-maps] SearchBox: filter countries (#500)
@sairarifhttps://github.com/sairarif it's a company project, so it's private. What do you want to know exactly? I can try to help you.
—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHubhttps://github.com/tomchentw/react-google-maps/issues/500#issuecomment-367239184, or mute the threadhttps://github.com/notifications/unsubscribe-auth/AELlViJ0UIHbVZzSC78xlP2W3Q2IWFPEks5tW8jigaJpZM4NguUH.
sairarif
on 21 Feb 2018
@rafaelgrilli92 if (this.map) { is not recongize in my .js file .Also my map should focus on specific address
sairarif
on 21 Feb 2018
@sairarif do you have your code in any public repo? Can I have a look at it?
By the way, "this.map" is just a reference to the actual GoogleMaps component. Add this as a prop:
<GoogleMaps ref={ref => this.map = ref}>
// Components iniside map
</GoogleMaps>
thank you
From: Rafael Grilli notifications@github.com
Sent: Thursday, February 22, 2018 4:25 AM
To: tomchentw/react-google-maps
Cc: sairarif; Mention
Subject: Re: [tomchentw/react-google-maps] SearchBox: filter countries (#500)
@sairarifhttps://github.com/sairarif do you have your code in any public repo? Can I have a look at it?
By the way, "this.map" is just a reference to the actual GoogleMaps component. Add this as a prop:
—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHubhttps://github.com/tomchentw/react-google-maps/issues/500#issuecomment-367513187, or mute the threadhttps://github.com/notifications/unsubscribe-auth/AELlVrAHr_pnSOxb_kn2KUVdUcMAO42Zks5tXKXggaJpZM4NguUH.
sairarif
on 22 Feb 2018
no i dont have a code in public repo.
import React from "react";
import {
GoogleMap,
Marker,
withGoogleMap,
withScriptjs,
InfoWindow
} from "react-google-maps";
import MyMarker from './MyMarker';
//const exampleMapStyles = require(./fancyMapStyles.json);
class MapComponent extends React.Component {
mapStyles = [];
constructor(props) {
super(props);
}
mapCenter = {
lat: 31.47188,
lng: 74.272472,
}
state = {
bounds: null,
center: this.mapCenter,
markers: [],
}
handlePlacesChanged=()=> {
const places = this.refs.searchBox.getPlaces();
const markers = [];
// Add a marker for each place returned from search bar
places.forEach(function (place) {
markers.push({
position: place.geometry.location,
});
});
}
getMarkers = (markers) => {
if (markers && markers.length > 0) {
/* we can put filter on markers array
- For this you take a state variable with filterCondition
- Find this filterCondition with inputbox
- and when you write anything on input box , it state will be updated and
- markers array will be automatically update
/
/ return markers.filter(marker=>{
marker.name == 'saira'
}).map(mark => {
return (
{...mark}
/>
);
}); */
return markers.map(mark => {
return (
{...mark}
/>
);
});
}
return null;
};
componentDidMount() {
// This interval is to check when the map is completely loaded
const interval = window.setInterval(() => {
if (this.map) {
const input = document.getElementById("searchInputControl");
this.autocomplete = new window.google.maps.places.Autocomplete(input);
this.autocomplete.setComponentRestrictions({ country: 'pk' });
this.autocomplete.addListener('place_changed', this.handleSearchBoxPlacesChanged)
window.clearInterval(interval);
}
}, 500)
}
handleSearchBoxPlacesChanged = () => {
const place = this.autocomplete.getPlace();
}
render() {
return (
<GoogleMap
defaultZoom={16}
defaultCenter={this.mapCenter}
defaultOptions={{ styles: this.mapStyles }}
ref={ref => this.map = ref}>
>
style={{ width: '750px',height:'30px' , marginTop: 59, position: 'absolute', top: 0, left: 200 }}
placeholder="Find an address..."
/>
{this.getMarkers(this.props.markers)}
</GoogleMap>
</div>
);
};
}
const _withGoogleMap = withGoogleMap(MapComponent);
const FinalMapComponent = withScriptjs(_withGoogleMap);
const _googleMap =props => {
let _props = {
googleMapURL:
"https://maps.googleapis.com/maps/api/js?&key=AIzaSyCQSsJq1gln-GxFIkeSEzYns2a0kq_QF5w&v=3.exp&libraries=geometry,drawing,places",
loadingElement:
containerElement:
mapElement:
};
return
};
export default _googleMap;
sairarif
on 22 Feb 2018
@rafaelgrilli92 above is my map class in reactjs. Currently filter text box only shows map place with autocomplete and does not filter according to my markers this.props.markers.
I want to filtered markers according to my input on searchtextbox. Like if i want to find speicific region Reseller marker or Agent Marker. How can i achieve this functionality. Hopefully you got my points. please suggest me better solution of filtering data on map or highlight filtered data on map
sairarif
on 22 Feb 2018
Related issues
julienvincent
·
3Comments
0x1bitcrack3r
·
3Comments
craigcartmell
·
4Comments
PaulieScanlon
·
3Comments
madbean
·
3Comments
Most helpful comment
I kinda made it work. I added a normal input with an ID inside the Map component (but you can place it wherever you want), but I'm not using the SearchBox component anymore.
And the input component: