Google Map Custom Popover

Description

This is an example of Custom Popover usage with React Google Maps. It may include any content: videos, gifs, images, text etc. Also, it could be customized with CSS classes.

Examples

<Popover width={300} height={400} preferredPosition="left" trigger={<Marker />}>
  <div>Popover content here</div>
</Popover>

<Popover
  width={400}
  height={350}
  preferredPosition="top-start"
  trigger={
    <MarkerWithLabel
      position={{ lat: 50.00497, lng: 36.23143 }}
      labelAnchor={new window.google.maps.Point(0, 0)}
      icon={marker}
      labelVisible={false}
      animation={window.google.maps.Animation.DROP}
    >
      <div />
    </MarkerWithLabel>
  }
>
  <div>
    <h3>Title</h3>

    <p>
      Fusce ac felis sit amet ligula pharetra condimentum. Phasellus accumsan
      cursus velit. Aenean viverra rhoncus pede. Praesent vestibulum dapibus
      nibh. Phasellus volutpat, metus eget egestas mollis, lacus lacus blandit
      dui, id egestas quam mauris ut lacus.
    </p>
  </div>
</Popover>

Props

width

width?: number

Width of popover. Defaults to 250px.

height

height?: number

Height of popover. Defaults to 300px

preferredPosition

preferredPosition?: string;

One of the accepted placement values listed in the Popper.js documentation.
Your popover is going to be placed according to the value of this property. Defaults to right.

trigger

trigger?: HTMLElement

An HTML element that triggers the popover appearing.

About Codica

The names and logos for Codica are trademarks of Codica.

We love open source software! See our other projects or hire us to design, develop, and grow your product.