mapTypeControlOptions is not working

[fromsujay]

Hello,

I am a beginner at programming, I request you to be patient with me.

Development environment : google-maps-react v2.0.2, react v16.6.1

Problem description : I want to position the horizontal bar for selecting the type of map Plan or Satellite at the bottom_center of the screen. When I mention this as an object as described in Google Maps API documentation or google-maps-react documentation the selection component doesn't move.

I had a look at the source of google-maps-react in the following file : google-maps-react/src/index.js

I found that mapTypeControlOptions has been declared as a boolean whereas it should be an object. If it is declared as an object, this will perhaps correct the problem.

Map.propTypes = { mapTypeControlOptions: PropTypes.bool, };

How do I go about correcting this problem ?

Thanks in advance for your advice.

[JunOkumura]

I have same problem.

I found a workaround that use map.setOptions.

class CustomMap extends React.Component {
  onReady(_, map) => {
    map.setOptions({
      mapTypeControlOptions: {
        position: google.maps.ControlPosition.TOP_RIGHT,
      },
    });
  }

  render() {
    return (
      <Map
        google={this.props.google}
        onReady={this.onReady}
      />
    );
  }
}

It works for me.

[praveen-ranjan-ocl]

As per this library mapTypeControlOptions is boolean https://github.com/fullstackreact/google-maps-react/blob/master/src/index.js

mapTypeControlOptions: PropTypes.bool

But as pe google map documentation mapTypeControlOptions should be an object. https://developers.google.com/maps/documentation/javascript/examples/control-positioning#maps_control_positioning-javascript

mapTypeControlOptions: { style: google.maps.MapTypeControlStyle.DROPDOWN_MENU, mapTypeIds: ['roadmap', 'terrain'] }

Please look into this issue

[fromsujay]

I have same problem.

I found a workaround that use map.setOptions.

class CustomMap extends React.Component {
  onReady(_, map) => {
    map.setOptions({
      mapTypeControlOptions: {
        position: google.maps.ControlPosition.TOP_RIGHT,
      },
    });
  }

  render() {
    return (
      <Map
        google={this.props.google}
        onReady={this.onReady}
      />
    );
  }
}

It works for me.

@JunOkumura Thanks for the suggestion. I ended up making a fork of the project and making the correction as I had suggested in the source code myself. The correction works and I have deployed the correction.