React-google-maps: Can i disable places in maps?

[sarovin]

Hi,
i have this component:

class MapsWithSearch extends Component {
  constructor(props) {
    super(props);

    this.onChangePlace = this.onChangePlace.bind(this);
  }

  onChangePlace() {
    const { onChange } = this.props;

    if (onChange) onChange(this.searchBox.getPlaces());
  }

  render() {
    const { initialValues: { coords, formatted_address } } = this.props;

    return (
      <React.Fragment>
        <Maps
          containerElement={<div style={{ height: '400px' }} className="maps fluid-container" />}
          mapElement={<div style={{ height: '100%' }} />}
          coords={coords}
        />
        <StandaloneSearchBox
          ref={(searchBox) => {
            this.searchBox = searchBox;
          }}
          onPlacesChanged={this.onChangePlace}
        >
          <input
            type="text"
            className="text-field-default text--label-large w-input"
            defaultValue={formatted_address}
          />
        </StandaloneSearchBox>

        <div className="w-col w-col-3">
          <div className="contenitore flex--row-j-center-a-center">
            <Button
              onClick={() => null}
              className="btn--medium btn-style-fill-red elevation-2-red btn-pressed-elevation1-red col-lg-12 m-t-lg-40 m-t-sm-8 w-button"
            >
              <span className="icn--size-xs m-r-lg-8"></span>Cerca
            </Button>
          </div>
        </div>
      </React.Fragment>
    );
  }
}

Maps Component:

export default withGoogleMap(({ onChangeCoords, coords }) => (
  <div className="map">
    <GoogleMap
      center={{
        lat: coords.lat,
        lng: coords.lng,
      }}
      defaultZoom={17}
    >
      <Marker
        draggable
        onDragEnd={e => onChangeCoords({ lat: e.latLng.lat(), lng: e.latLng.lng() })}
        position={{
          lat: coords.lat,
          lng: coords.lng,
        }}
      />
    </GoogleMap>
  </div>
));

And i have added this on my Head:

<script
  async
  defer
  src="https://maps.googleapis.com/maps/api/js?key=MYKEY&v=3.exp&libraries=geometry,drawing,places"
/>

It's work fine but i don't want see the places in maps...how can i disable the places?
If i remove places libraries from the script, i have this error => Invariant Violation: Did you include "libraries=places" in the URL?

[GitHug]

Hi Sarovin.

You can solve this by styling your map. What I do is that I create a mapStyles.json file that includes the style. If you would like to remove all labels and icons for example, then you could add this in the json file

[
  {
    "featureType": "all",
    "elementType": "labels.text",
    "stylers": [
      {
        "visibility": "off"
      }
    ]
  },
  {
    "featureType": "poi",
    "elementType": "labels.icon",
    "stylers": [
      {
        "visibility": "off"
      }
    ]
  }
]

To use the style you can import your json and add it to the map options

import mapStyles from '../mapStyles.json';

const defaultMapOptions = {
  styles: mapStyles
};

/* other code...*/

<GoogleMap
    ref={props.onMapMounted}
    defaultZoom={15}
    zoom={1}
    onBoundsChanged={props.onBoundsChanged}
    defaultOptions={defaultMapOptions}
    onIdle={props.onIdle}
  >

You can check more options for styling your map here https://developers.google.com/maps/documentation/javascript/styling

I hope this helps.

[sarovin]

Thanks @GitHug

[shethmanan]

Thanks @GitHug. Also a tip: if may not work if your are using a old or deprecated key so don't panic.Cheers!

[rostgoat]

@GitHug 's solution makes sense but doesn't seem to work for me... not sure why