React-google-maps: Custom button to map

[knapeto]

Hi,

how to create custom button like control button ?
Thanks for any advice.

[tomchentw]

According to the docs, I believe you need something like this

map.controls[google.maps.ControlPosition.BOTTOM_LEFT].push(centerControlDiv);

However, this might not be supported at the moment. Will look into this in our roadmap.

[sohibul]

+1 for this feature

[frankwong]

I found a way to make this work. So apparently it is hidden a few layers deep. Here is how I was able to push a button onto the map. Let's say you rendered your map with the following.

<GoogleMap ref={(map) => (this._googleMapComponent = map)}...

Then you can push a button on the map with the following

var map = this._googleMapComponent.props.map; map.controls[google.maps.ControlPosition.BOTTOM_LEFT].push(centerControlDiv);

[sohibul]

@frankwong this is work. But if your centerControlDiv is react component, you will get a trouble later, because react cannot find that component you move. My suggestion to create menu on top of google map is just create react component and put it on top of map by set z-index.

[n0ne]

@frankwong and where I have to write this code?

[frankwong]

@n0ne, you can add it anywhere you have access to googleMapComponent. Below is an example of how I structured the code

const MapView = React.createClass({
  ...
  _insertButton: (parentThis, map)=> {
    let controlDiv = document.createElement('div');
    map.controls[google.maps.ControlPosition.RIGHT_BOTTOM].push(controlDiv);
  },
  render: ()=> {
    return (
      <GoogleMapLoader
        googleMapElement={
          <GoogleMap
            ref={(map) => (this._googleMapComponent = map)}
            ...
            controls={this._insertButton}
          >
          ...
          </GoogleMap>
        }
      />
    );
  }
});

[tomchentw]

Feel free to submit a PR. Close for now

We're also looking for maintainers. Involve in #266 to help strengthen our community!

[akosialz]

@frankwong hi
im a lil bit perplexed as to how i should port your solution to mine. can you post the entire code of it for our reference?

[Michael-Brooks]

Is there an update on this issue? I'm trying to add it into my ReactJS project using ES6 and RxJS. I have tried to convert it over and get no errors, but it also isn't displaying at all by following this issue and the Custom Controls docs in Google Maps.

[asonni]

@Michael-Brooks you can try add this JSX code

<SearchBox controlPosition={window.google.maps.ControlPosition.BOTTOM_LEFT}> <div> <input type="hidden" className="input-search-map" placeholder="Search..." /> <Your button component here... /> </div> </SearchBox>

[rockia]

@Michael-Brooks and anyone who is looking into this issue, so sorry I forgot to mention my solution. Basically the code posted works, however you will need to make sure the reference is ready. So here is what I do

if (this.mapComponentRef.current) {
      return (
        <CustomControl
          mapRef={this.mapComponentRef.current}
          controlPosition={window.google.maps.ControlPosition.RIGHT_CENTER}
        >
          <CusomZoomControl />
        </CustomControl>
      );
    }

I hope this helps.