How to add a separate searchbox above the map using react-google-maps

Question

I created a component in react, I want a separate searchbox not embedded in the map itself. I have been looking for tutorial to do this but no luck and also I found the google-maps-react documentation a bit confusing because it utilizes a HOC, compose, to simplify the map.

    const Map = withScriptjs(withGoogleMap(props => {
  return (
      <div className="map-wrap">
        <div className="map-searchbox"><input placeholder="Enter Address" /></div>
        <div className="map">
          <GoogleMap
            defaultZoom={14}
            center={{lat: 42.3601, lng: -71.0589}}
          />
        </div>
      </div>
    )
  }
))

MoZaHo · Accepted Answer · 2018-08-07 16:02:24Z

1

Just put a style on the containerElement.

<GoogleMap
  defaultZoom={14}
  center={{lat: 42.3601, lng: -71.0589}}
  containerElement={<div style={{height:`500px`,width:`50%`,display:'flex',flexDirection:'column-reverse' }} />}
/>

answered Aug 7, 2018 at 16:02

MoZaHo

313 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Sakhi Mansoor · Accepted Answer · 2018-08-19 19:36:39Z

1

If I got your question right, you're talking about searchBox for google Places. For that I made a codesandbox, you just need to add your API key (enable Places API on that key) then It works like a charm. codesandbox: https://codesandbox.io/s/qqzm67ykmq

Feel free to ask any questions.

answered Aug 19, 2018 at 19:36

Sakhi Mansoor

8,1325 gold badges24 silver badges38 bronze badges

1 Comment

singmotor Over a year ago

This is the best answer I've seen to the numerous issues with Autocomplete not handling unit numbers well

Collectives™ on Stack Overflow

How to add a separate searchbox above the map using react-google-maps

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related