How do I remove 'close' button from InfoWindow in react-google-maps?

Question

Havent been able to figure out how to do this, is there a way to target with css or is it an option in the lib?

Answer 1

Per official documentation:

The InfoWindow class does not offer customization.

Even though it is possible to override Google Maps API CSS to hide close button as demonstrated, for example, here, the recommended way would be to create a fully customized popup, in case of react-google-maps library, OverlayView component is a good candidate for that matter:

import React from "react";
import { OverlayView } from "react-google-maps";

const getPixelPositionOffset = pixelOffset => (width, height) => ({
  x: -(width / 2) + pixelOffset.x,
  y: -(height / 2) + pixelOffset.y
});

const Popup = props => {
  return (
    <OverlayView
      position={props.anchorPosition}
      mapPaneName={OverlayView.OVERLAY_MOUSE_TARGET}
      getPixelPositionOffset={getPixelPositionOffset(props.markerPixelOffset)}
    >
      <div className="popup-tip-anchor">
        <div className="popup-bubble-anchor">
          <div className="popup-bubble-content"><h1>{props.content}</h1></div>
        </div>
      </div>
    </OverlayView>
  );
};

Demo