Skip to content

Latest commit

 

History

History
96 lines (72 loc) · 2.55 KB

README.md

File metadata and controls

96 lines (72 loc) · 2.55 KB

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

Codica logo

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.