Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Custom InfoWindow #290

Closed
davidpelayo opened this issue Jun 28, 2016 · 9 comments
Closed

Custom InfoWindow #290

davidpelayo opened this issue Jun 28, 2016 · 9 comments

Comments

@davidpelayo
Copy link

davidpelayo commented Jun 28, 2016

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 davidpelayo changed the title InfoWindow HTML customization Custom InfoWindow Jun 28, 2016
@davidpelayo
Copy link
Author

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
Copy link
Author

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
Copy link
Owner

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
Copy link

how to hide infow window close button???

@teksrc
Copy link

teksrc commented Jul 9, 2018

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

@pruhstal
Copy link

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

@teksrc
Copy link

teksrc commented Jul 10, 2018

@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
Copy link

pruhstal commented Jul 10, 2018

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

@lortschi
Copy link

lortschi commented Nov 17, 2023

I have to say I never struggled with an other Google Maps Wrapper implementation MORE like with react-google-maps/api module. Everything it has been in this module implemented it's against common software engineering sense. It gives you a feeling to work with this api, like you will go to barber and he will bake you a cake instead of cut your hair.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

6 participants