React-google-maps: Custom InfoWindow

[davidpelayo]

Do you know how can I customize the InfoWindow markup to fully customize it? Not only the content of the InfoWindow but also the wrapper divs and so.

Thanks in advance.

Edit: I guess we should reproduce this example Google provides: Demo.

[davidpelayo]

Just to point out. I realized google examples as well as the AirBnb implementation are using the OverlayView abstraction to achieve this, setting the position when it comes to render the fake "InfoWindows".

Therefore, this is the only way to go. Even angular-google-maps repo is using the google InfoBox abstraction (using OverlayViews underneath) to achieve this.

[davidpelayo]

However, I think we should add classes inheritance by props at least or any data attribute to be able to style elements, in case needed, via CSS the component.

[tomchentw]

We have custom OverlayView component as well as pulling support for InfoBox as a addon. Could you see if that fits your needs?

Also, 6.0.0 is released on npm beta tag now. See the changelog here. We also have a new demo page. Feel free to try it:
https://tomchentw.github.io/react-google-maps/

[ashishchoudhary12]

how to hide infow window close button???

[Frankcarvajal]

@ashishchoudhary12 and even over a year later that answer has yet to be answered. lol

[pruhstal]

@Frankcarvajal InfoBox is probably the way to go. Way more customizable.

[Frankcarvajal]

@pruhstal The only issue is there aren't any great examples of it being used via React and not using the 'composable' package used in the examples.

[pruhstal]

@Frankcarvajal here's an example of how I'm using it within one of my custom components (WrappedCard)

 const MapComponent = compose(
  withStateHandlers(
    () => ({
      isOpen: false
    }),
    {
      onToggleOpen: ({ isOpen }) => () => ({
        isOpen: !isOpen
      })
    }
  ),
  withScriptjs,
  withGoogleMap
)(props => (
  <GoogleMap
    onClick={props.onToggleOpen}
    defaultZoom={12}
    defaultOptions={{
      fullscreenControl: false,
      mapTypeControl: false,
      streetViewControl: false
    }}
    defaultCenter={{ lat: this.props.lat, lng: this.props.lng }}
  >
    <Marker
      key={item.id}
      icon={markerIcon}
      position={{
        lat: item.geom.coordinates[0],
        lng: item.geom.coordinates[1]
      }}
      onClick={props.onToggleOpen}
    >
      {props.isOpen && (
        <InfoBox
          onCloseClick={props.onToggleOpen}
          options={{
            alignBottom: true,
            pane: 'mapPane',
            pixelOffset: new google.maps.Size(-130, 0),
            boxStyle: {
              width: '300px'
            },
            closeBoxURL: ``,
            enableEventPropagation: true
          }}
        >
          <WrappedCard className={cardWrapperClass}>
            <div className={contentClass}>
              <img
                className={imageClass}
                src={getResizedPhoto(item.photo, 60, 60)}
              />
              <WrappedLink
                className={itemLinkClass}
                to={`/item/${item.slug}`}
                href={`/item/${item.slug}`}
              >
                {item.name}
              </WrappedLink>
            </div>
          </WrappedCard>
        </InfoBox>
      )}
    </Marker>
  </GoogleMap>
));

To be honest, I've found using the compose package nicely encapsulates props into the component itself.