Changing the position of controls makes them disappear

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>
  );
});

[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
          ]
        }

[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.