How can i display markers based on some filters using google maps api in React
0
Basically my problem is that i need to filter the markers that are currently displayed on the map(there's like 7 of them), but to do that i need to refresh the page(the map component) because there i do the requirement check(fiter check) in this case the price, and i need to readd the markers that meet the requirement. When the map first loads it dispays all the markers from the db.
I tried using new window.google.maps.reload(); after the button was pressed and this.forceUpdate() but can't figure out the logic
return (
<div>
<MenuItem
eventKey={3.1}
onClick={() => {
this.setState({ price: 2 });
new window.google.maps.reload();
}}
>
Budget
</MenuItem>
<MenuItem
eventKey={3.2}
onClick={() => {
this.setState({ price: 3 });
new window.google.maps.reload();
}}
>
Expensive
</MenuItem>
<MenuItem
eventKey={3.3}
onClick={() => {
this.setState({ price: 4 });
new window.google.maps.reload();
}}
>
Luxury
</MenuItem>
</DropdownButton>
</Nav>
</Navbar>
<Map
id="myMap"
options={{
center: { lat: 44.439663, lng: 26.096306 },
zoom: 12
}}
onMapLoad={map => {
if (this.state.price === 2) {
this.state.restaurants.map(restaurant => {
if (restaurant.price === 2) {
addMarker(restaurant, map);
}
});
} else {
this.state.restaurants.map(restaurant =>
addMarker(restaurant, map)
);
}
}}
/>
</div>
);
}
}
export default App;
javascript reactjs react-bootstrap
asked Jan 2 at 18:08
Iannis ParisIannis Paris
1
|
show 1 more comment
0
Basically my problem is that i need to filter the markers that are currently displayed on the map(there's like 7 of them), but to do that i need to refresh the page(the map component) because there i do the requirement check(fiter check) in this case the price, and i need to readd the markers that meet the requirement. When the map first loads it dispays all the markers from the db.
I tried using new window.google.maps.reload(); after the button was pressed and this.forceUpdate() but can't figure out the logic
return (
<div>
<MenuItem
eventKey={3.1}
onClick={() => {
this.setState({ price: 2 });
new window.google.maps.reload();
}}
>
Budget
</MenuItem>
<MenuItem
eventKey={3.2}
onClick={() => {
this.setState({ price: 3 });
new window.google.maps.reload();
}}
>
Expensive
</MenuItem>
<MenuItem
eventKey={3.3}
onClick={() => {
this.setState({ price: 4 });
new window.google.maps.reload();
}}
>
Luxury
</MenuItem>
</DropdownButton>
</Nav>
</Navbar>
<Map
id="myMap"
options={{
center: { lat: 44.439663, lng: 26.096306 },
zoom: 12
}}
onMapLoad={map => {
if (this.state.price === 2) {
this.state.restaurants.map(restaurant => {
if (restaurant.price === 2) {
addMarker(restaurant, map);
}
});
} else {
this.state.restaurants.map(restaurant =>
addMarker(restaurant, map)
);
}
}}
/>
</div>
);
}
}
export default App;
javascript reactjs react-bootstrap
asked Jan 2 at 18:08
Iannis ParisIannis Paris
1
What library are you using for the Map ?
– Moinul Hossain
Jan 2 at 19:51
I'm not using any library, map component can be seen here: pastebin.com/97s54jQL and here is the full code from the initial post: pastebin.com/wZREKVGE
– Iannis Paris
Jan 2 at 19:55
one quick hack cane be using a key in your Map component by forcing it to be re-created every time the key changes: <Map id="myMap" key={this.state.price} options={{ center: { lat: 44.439663, lng: 26.096306 }, zoom: 12 }} ... />
– Moinul Hossain
Jan 2 at 19:59
It worked!!! Next i'll try to add different filters types(Like a rating, price etc.), is it a good idea to continue doing this hack using the key? Also flodding the map component props area with if else statements like i did with price? How would you do it? Thanks a lot for the answer!!
– Iannis Paris
Jan 2 at 20:09
I haven't looked much into the google maps api, but I would probably add acomponentDidUpdatemethod in the Map component and update my map when I receive new props there instead of using keys. Also you can probably move your inline onMapLoad method to a component methodonMapLoad={this.onMapLoad}
– Moinul Hossain
Jan 2 at 21:29
|
show 1 more comment
0
0
0
Basically my problem is that i need to filter the markers that are currently displayed on the map(there's like 7 of them), but to do that i need to refresh the page(the map component) because there i do the requirement check(fiter check) in this case the price, and i need to readd the markers that meet the requirement. When the map first loads it dispays all the markers from the db.
I tried using new window.google.maps.reload(); after the button was pressed and this.forceUpdate() but can't figure out the logic
return (
<div>
<MenuItem
eventKey={3.1}
onClick={() => {
this.setState({ price: 2 });
new window.google.maps.reload();
}}
>
Budget
</MenuItem>
<MenuItem
eventKey={3.2}
onClick={() => {
this.setState({ price: 3 });
new window.google.maps.reload();
}}
>
Expensive
</MenuItem>
<MenuItem
eventKey={3.3}
onClick={() => {
this.setState({ price: 4 });
new window.google.maps.reload();
}}
>
Luxury
</MenuItem>
</DropdownButton>
</Nav>
</Navbar>
<Map
id="myMap"
options={{
center: { lat: 44.439663, lng: 26.096306 },
zoom: 12
}}
onMapLoad={map => {
if (this.state.price === 2) {
this.state.restaurants.map(restaurant => {
if (restaurant.price === 2) {
addMarker(restaurant, map);
}
});
} else {
this.state.restaurants.map(restaurant =>
addMarker(restaurant, map)
);
}
}}
/>
</div>
);
}
}
export default App;
javascript reactjs react-bootstrap
asked Jan 2 at 18:08
Iannis ParisIannis Paris
1
Basically my problem is that i need to filter the markers that are currently displayed on the map(there's like 7 of them), but to do that i need to refresh the page(the map component) because there i do the requirement check(fiter check) in this case the price, and i need to readd the markers that meet the requirement. When the map first loads it dispays all the markers from the db.
I tried using new window.google.maps.reload(); after the button was pressed and this.forceUpdate() but can't figure out the logic
return (
<div>
<MenuItem
eventKey={3.1}
onClick={() => {
this.setState({ price: 2 });
new window.google.maps.reload();
}}
>
Budget
</MenuItem>
<MenuItem
eventKey={3.2}
onClick={() => {
this.setState({ price: 3 });
new window.google.maps.reload();
}}
>
Expensive
</MenuItem>
<MenuItem
eventKey={3.3}
onClick={() => {
this.setState({ price: 4 });
new window.google.maps.reload();
}}
>
Luxury
</MenuItem>
</DropdownButton>
</Nav>
</Navbar>
<Map
id="myMap"
options={{
center: { lat: 44.439663, lng: 26.096306 },
zoom: 12
}}
onMapLoad={map => {
if (this.state.price === 2) {
this.state.restaurants.map(restaurant => {
if (restaurant.price === 2) {
addMarker(restaurant, map);
}
});
} else {
this.state.restaurants.map(restaurant =>
addMarker(restaurant, map)
);
}
}}
/>
</div>
);
}
}
export default App;
javascript reactjs react-bootstrap
javascript reactjs react-bootstrap
asked Jan 2 at 18:08
Iannis ParisIannis Paris
1
asked Jan 2 at 18:08
Iannis ParisIannis Paris
1
asked Jan 2 at 18:08
Iannis ParisIannis Paris
1
asked Jan 2 at 18:08
Iannis ParisIannis Paris
1
asked Jan 2 at 18:08
Iannis ParisIannis Paris
1
1
What library are you using for the Map ?
– Moinul Hossain
Jan 2 at 19:51
I'm not using any library, map component can be seen here: pastebin.com/97s54jQL and here is the full code from the initial post: pastebin.com/wZREKVGE
– Iannis Paris
Jan 2 at 19:55
one quick hack cane be using a key in your Map component by forcing it to be re-created every time the key changes: <Map id="myMap" key={this.state.price} options={{ center: { lat: 44.439663, lng: 26.096306 }, zoom: 12 }} ... />
– Moinul Hossain
Jan 2 at 19:59
It worked!!! Next i'll try to add different filters types(Like a rating, price etc.), is it a good idea to continue doing this hack using the key? Also flodding the map component props area with if else statements like i did with price? How would you do it? Thanks a lot for the answer!!
– Iannis Paris
Jan 2 at 20:09
I haven't looked much into the google maps api, but I would probably add acomponentDidUpdatemethod in the Map component and update my map when I receive new props there instead of using keys. Also you can probably move your inline onMapLoad method to a component methodonMapLoad={this.onMapLoad}
– Moinul Hossain
Jan 2 at 21:29
|
show 1 more comment
What library are you using for the Map ?
– Moinul Hossain
Jan 2 at 19:51
I'm not using any library, map component can be seen here: pastebin.com/97s54jQL and here is the full code from the initial post: pastebin.com/wZREKVGE
– Iannis Paris
Jan 2 at 19:55
one quick hack cane be using a key in your Map component by forcing it to be re-created every time the key changes: <Map id="myMap" key={this.state.price} options={{ center: { lat: 44.439663, lng: 26.096306 }, zoom: 12 }} ... />
– Moinul Hossain
Jan 2 at 19:59
It worked!!! Next i'll try to add different filters types(Like a rating, price etc.), is it a good idea to continue doing this hack using the key? Also flodding the map component props area with if else statements like i did with price? How would you do it? Thanks a lot for the answer!!
– Iannis Paris
Jan 2 at 20:09
I haven't looked much into the google maps api, but I would probably add acomponentDidUpdatemethod in the Map component and update my map when I receive new props there instead of using keys. Also you can probably move your inline onMapLoad method to a component methodonMapLoad={this.onMapLoad}
– Moinul Hossain
Jan 2 at 21:29
What library are you using for the Map ?
– Moinul Hossain
Jan 2 at 19:51
What library are you using for the Map ?
– Moinul Hossain
Jan 2 at 19:51
I'm not using any library, map component can be seen here: pastebin.com/97s54jQL and here is the full code from the initial post: pastebin.com/wZREKVGE
– Iannis Paris
Jan 2 at 19:55
I'm not using any library, map component can be seen here: pastebin.com/97s54jQL and here is the full code from the initial post: pastebin.com/wZREKVGE
– Iannis Paris
Jan 2 at 19:55
one quick hack cane be using a key in your Map component by forcing it to be re-created every time the key changes: <Map id="myMap" key={this.state.price} options={{ center: { lat: 44.439663, lng: 26.096306 }, zoom: 12 }} ... />
– Moinul Hossain
Jan 2 at 19:59
one quick hack cane be using a key in your Map component by forcing it to be re-created every time the key changes: <Map id="myMap" key={this.state.price} options={{ center: { lat: 44.439663, lng: 26.096306 }, zoom: 12 }} ... />
– Moinul Hossain
Jan 2 at 19:59
It worked!!! Next i'll try to add different filters types(Like a rating, price etc.), is it a good idea to continue doing this hack using the key? Also flodding the map component props area with if else statements like i did with price? How would you do it? Thanks a lot for the answer!!
– Iannis Paris
Jan 2 at 20:09
It worked!!! Next i'll try to add different filters types(Like a rating, price etc.), is it a good idea to continue doing this hack using the key? Also flodding the map component props area with if else statements like i did with price? How would you do it? Thanks a lot for the answer!!
– Iannis Paris
Jan 2 at 20:09
I haven't looked much into the google maps api, but I would probably add a
componentDidUpdate method in the Map component and update my map when I receive new props there instead of using keys. Also you can probably move your inline onMapLoad method to a component method onMapLoad={this.onMapLoad}– Moinul Hossain
Jan 2 at 21:29
I haven't looked much into the google maps api, but I would probably add a
componentDidUpdate method in the Map component and update my map when I receive new props there instead of using keys. Also you can probably move your inline onMapLoad method to a component method onMapLoad={this.onMapLoad}– Moinul Hossain
Jan 2 at 21:29
|
show 1 more comment
0
active
oldest
votes
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f54011139%2fhow-can-i-display-markers-based-on-some-filters-using-google-maps-api-in-react%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
0
active
oldest
votes
0
active
oldest
votes
active
oldest
votes
active
oldest
votes
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f54011139%2fhow-can-i-display-markers-based-on-some-filters-using-google-maps-api-in-react%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
What library are you using for the Map ?
– Moinul Hossain
Jan 2 at 19:51
I'm not using any library, map component can be seen here: pastebin.com/97s54jQL and here is the full code from the initial post: pastebin.com/wZREKVGE
– Iannis Paris
Jan 2 at 19:55
one quick hack cane be using a key in your Map component by forcing it to be re-created every time the key changes: <Map id="myMap" key={this.state.price} options={{ center: { lat: 44.439663, lng: 26.096306 }, zoom: 12 }} ... />
– Moinul Hossain
Jan 2 at 19:59
It worked!!! Next i'll try to add different filters types(Like a rating, price etc.), is it a good idea to continue doing this hack using the key? Also flodding the map component props area with if else statements like i did with price? How would you do it? Thanks a lot for the answer!!
– Iannis Paris
Jan 2 at 20:09
I haven't looked much into the google maps api, but I would probably add a
componentDidUpdatemethod in the Map component and update my map when I receive new props there instead of using keys. Also you can probably move your inline onMapLoad method to a component methodonMapLoad={this.onMapLoad}– Moinul Hossain
Jan 2 at 21:29