const MapWithAMarkerClusterer = compose(
  withProps({
    googleMapURL: "MY KEY",
    loadingElement: <div style={{ height: `100%` }} />,
    containerElement: <div style={{ height: `400px` }} />,
    mapElement: <div style={{ height: `100%` }} />,
  }),
  withHandlers({
    onMarkerClustererClick: () => (markerClusterer) => {
      const clickedMarkers = markerClusterer.getMarkers()
    }
  }),
  withStateHandlers(() => ({
    isOpen: false,
    markerId: ''
  }), {
    onToggleOpen: ({ isOpen }) => (markerId) => ({
      isOpen: !isOpen,
      markerId: markerId
    })
  }),
  withScriptjs,
  withGoogleMap
)(props =>
  <GoogleMap
    defaultZoom={4}
    defaultCenter={{ lat: -23.696248, lng: 133.880731 }}
  >
    <MarkerClusterer
      onClick={props.onMarkerClustererClick}
      averageCenter
      enableRetinaIcons
      gridSize={60}
    >
      {props.companies.map(company => (
        <span key={company.company_name}>
          <Marker
            position={company.google_maps.geometry_location}
            onClick={() => props.onToggleOpen(company.company_name)}
          >
            {props.isOpen[props.markerId] && <InfoWindow onCloseClick={props.onToggleOpen}>
              <p>Test</p>
              </InfoWindow>}
          </Marker>
        </span>
      ))}
    </MarkerClusterer>
  </GoogleMap>
);