Changing the position of controls makes them disappear

[sseppola]

If I set the position in either zoomControlOptions or mapTypeControlOptions, which is passed to the GoogleMap component in through the options prop, they disappear. When the attribute is not set they render fine to their default positions.

I've followed followed the control position class documentation, using values like: 'BOTTOM_RIGHT', 'TOP_RIGHT', and 'LEFT_CENTER', none of which work.
https://developers.google.com/maps/documentation/javascript/reference#ControlPosition

This is how I'm using it:

import GoogleMap from 'google-map-react';
import OfficeMarker from './markers/OfficeMarker';

let mapOptions = {
  scrollwheel: false,
  zoomControlOptions: {
      //   position: 'RIGHT_CENTER',    // as long as this is not set it works
      style: 'SMALL'
  },
  mapTypeControlOptions: {
      position: 'BOTTOM_RIGHT'     // this makes the map type control disappear
  },
  draggable: false,
  rotateControl: false,
  scaleControl: false,
  streetViewControl: false,
  panControl: false,
};

const Map = React.createClass({
  render() {
    return (
      <div className="map-container" style={{height: '400px'}}>
        <GoogleMap
          options={mapOptions}
          center={this.props.center}
          zoom={this.props.zoom}>
          <OfficeMarker lat={this.props.officeCoords.lat} lng={this.props.officeCoords.lng} />
        </GoogleMap>
      </div>
  );
});

[istarkov]

Thank you. GMAP API uses it's internal constants to set view options, like google.maps.ZoomControlStyle.SMALL.
And it's my big fault that i don't expose this constants to user.

As there are a lot of google constants can be used in options i know this constants (but i don't know all)

google.maps.ControlPosition
google.maps.MapTypeControlStyle
google.maps.ZoomControlStyle
google.maps.MapTypeId

It's better to add something like optionsCreator initialization.

import GoogleMap from 'google-map-react';
import OfficeMarker from './markers/OfficeMarker';

function mapOptionsCreator(map) {
  return  {
    scrollwheel: false,
    zoomControlOptions: {
        position: map.ControlPosition.RIGHT_CENTER,    // as long as this is not set it works
        style: map.ZoomControlStyle.SMALL
    },
    mapTypeControlOptions: {
        position: map.ControlPosition.BOTTOM_RIGHT     // this makes the map type control disappear
    },
    draggable: false,
    rotateControl: false,
    scaleControl: false,
    streetViewControl: false,
    panControl: false,
  };
}

const Map = React.createClass({
  render() {
    return (
      <div className="map-container" style={{height: '400px'}}>
        <GoogleMap
          options={mapOptionsCreator}
          center={this.props.center}
          zoom={this.props.zoom}>
          <OfficeMarker lat={this.props.officeCoords.lat} lng={this.props.officeCoords.lng} />
        </GoogleMap>
      </div>
  );
});

And if options prop is function, i call it with google.map variable.

This is the first exception to my rule - Don't expose google api

I start to add this right now.

[istarkov]

Done, example
example source

[sseppola]

Perfect! thank you for fixing that so fast :)

[vidyaramachandran56]

Hi,i am having same issue with Map component.Not able to change maptypecontrol options.

<Map

      google={this.props.google}
      zoom={8}
      mapTypeControl="true"
      mapTypeControlOptions={{
        style: this.props.google.maps.MapTypeControlStyle.DROPDOWN_MENU,
        position: this.props.google.maps.ControlPosition.TOP_RIGHT
      }
      }/>

[abidRahim]

Hi @vidyaramachandran56, did you figure it out ?

I am not able to use mapTypeControl either. They render for a micro second and it disappears quickly after. Even though i am adding this to the options

        mapTypeControl: true,
        mapTypeControlOptions: {
          style: maps.MapTypeControlStyle.HORIZONTAL_BAR,
          position: maps.ControlPosition.BOTTOM_LEFT,
          mapTypeIds: [
            maps.MapTypeId.ROADMAP,
            maps.MapTypeId.SATELLITE,
            maps.MapTypeId.HYBRID
          ]
        }

[vidyaramachandran56]

@abidRahim ,the issue is resolved.Since I was using google-maps library ,I couldn't change the type control style and position.
Try using google-map-react.

[abidRahim]

Thanks. It just worked for me.

I was working under Development Mode , with no key . As soon as i added the key it worked for me.

[MSonia0903]

I have a similar problem. Are you using a Development mode key or Production mode key?

[scottkz]

Is this working in the Curren release. I cannot get it working

function createMapOptions(maps) {
  return {
    styles: mapStyles,
    zoomControl: true,
    ZoomControlOptions: {
      position: maps.ControlPosition.TOP_LEFT,
      style: maps.ZoomControlStyle.SMALL,
    },
    mapTypeControl: false,
    streetViewControl: false,
    rotateControl: false,
    scaleControl: false,
    fullscreenControl: false,
  }
}

[mariraja-selvakumar]

How to enable TIlt & Rotate Control with React Google Map API