@morr/snazzy-info-window
v1.1.1
Published
Customizable info windows using the Google Maps JavaScript API.
Downloads
10
Maintainers
Readme
Snazzy Info Window
Snazzy Info Window is a plugin for customizable info windows using the Google Maps JavaScript API. Open sourced by the people that created Snazzy Maps.
Features
- Responsive sizing
- The info window will size properly for a variety of screen and map sizes.
- Custom styling
- Customize the border radius, shadow, background color, border, and much more.
- Supports SCSS styling.
- Dynamic content
- Supports dynamic content after initialization with proper resizing.
- Multiple placements
- Place the info window to the top, bottom, right, or left of the marker.
Examples
- Simple
- Multiple markers
- Dynamic content
- Set position
- Styling with SCSS
- Styling with JavaScript
- Complex styling
Installation
You can install Snazzy Info Window from the following package managers:
yarn add snazzy-info-window
npm install --save snazzy-info-window
bower install --save snazzy-info-window
Quick Start
- Include all the required files.
<link rel="stylesheet" href="snazzy-info-window.min.css">
<script src="https://maps.googleapis.com/maps/api/js?key={{YOUR KEY HERE}}"></script>
<script src="snazzy-info-window.min.js"></script>
- Create a new
SnazzyInfoWindow
object with a marker.
var infoWindow = new SnazzyInfoWindow({
marker: marker,
content: 'Snazzy!'
});
Public Methods
open()
Will attempt to open the info window.
close()
Will attempt to close the info window.
isOpen()
Determines if the info window is open.
destroy()
Will destroy the info window. If the info window is open it will be forced
closed bypassing the regular beforeClose
callback. All Google Map event
listeners associated to this info window will be removed.
setContent(content)
Set the content in the info window. This can be called at any time.
- Parameter:
content
- string or DOM Element
setPosition(latLng)
Set the position
of the info window. A valid Google Map instance must be associated to the info window. This could be either through the marker
or map
option.
- Parameter:
latLng
setWrapperClass(wrapperClass)
Set the wrapperClass
of the info window. This can be called at any time.
- Parameter:
wrapperClass
- string
getWrapper()
Will return the DOM Element for the wrapper container of the info window.
Options
marker
The Google Maps marker associated to this info window.
- Type: Marker
content
The text or DOM Element to insert into the info window body.
- Type: string or DOM Element
placement
Choose where you want the info window to be displayed, relative to the marker.
- Type: string
- Default:
'top'
- Possible Values:
'top'
,'bottom'
,'left'
,'right'
map
The Google Map associated to this info window. Only required if you are not using a marker
.
- Type: Map
position
The latitude and longitude where the info window is anchored. The offset
will default to 0px
when using this option. Only required if you are not using a marker
.
- Type: LatLng or LatLngLiteral
wrapperClass
An optional CSS class to assign to the wrapper container of the info window. Can be used for applying custom CSS to the info window.
- Type: string
maxWidth
The max width in pixels of the info window.
- Type: numeric
- Example:
200
maxHeight
The max height in pixels of the info window.
- Type: numeric
- Example:
200
offset
The offset from the marker. This value should be different for each placement
.
By default the offset is configured for the default Google Maps marker.
Type: object
Example:
offset: { top: '10px', left: '20px' }
edgeOffset
The offset from the map edge in pixels which is used when panning an info window into view.
Type: object
Example:
edgeOffset: { top: 20, right: 20, bottom: 20, left: 20 }
backgroundColor
The color to use for the background of the info window.
- Type: string
- Possible Values: Any valid CSS color value.
- Examples:
'#FF0000'
,'blue'
padding
A custom padding size around the content of the info window.
- Type: string
- Possible Values: Any valid CSS size value.
- Examples:
'10px'
,'2em'
,'5%'
border
A custom border around the info window. Set to false
to completely remove
the border. The units used for border
should be the same as pointer
.
Type: object or boolean
Example:
border: { width: '10px', color: '#FF0000' }
borderRadius
A custom CSS border radius property to specify the rounded corners of the info window.
- Type: string
- Example:
'2px 20px'
fontColor
The font color to use for the content inside the body of the info window.
- Type: string
- Possible Values: Any valid CSS color value.
- Examples:
'#FF0000'
,'blue'
fontSize
The font size to use for the content inside the body of the info window.
- Type: string
- Possible Values: Any valid CSS font size value.
pointer
The height of the pointer from the info window to the marker. Set to false
to completely remove the pointer. The units used for pointer
should be the
same as border
.
- Type: string or boolean
- Possible Values: Any valid CSS size value.
- Example:
'10px'
shadow
The CSS properties for the shadow of the info window. Set to false
to
completely remove the shadow.
Type: object or boolean
Default:
shadow: { h: '0px', v: '3px', blur: '6px', spread: '0px', opacity: 0.5, color: '#000' }
openOnMarkerClick
Determines if the info window will open when the marker is clicked. An internal
listener is added to the Google Maps click
event which calls the open()
method.
- Type: boolean
- Default:
true
closeOnMapClick
Determines if the info window will close when the map is clicked. An internal
listener is added to the Google Maps click
event which calls the close()
method. This will not activate on the Google Maps drag
event when the user is
panning the map.
- Type: boolean
- Default:
true
closeWhenOthersOpen
Determines if the info window will close when any other Snazzy Info Window is opened.
- Type: boolean
- Default:
false
showCloseButton
Determines if the info window will show a close button.
- Type: boolean
- Default:
true
closeButtonMarkup
The text or DOM Element to replace the default close button. No click handler or positioning is added to your markup if you use this option.
- Type: string or DOM Element
panOnOpen
Determines if the info window will be panned into view when opened.
- Type: boolean
- Default:
true
callbacks
All callbacks are optional and can access the info window instance via this
.
Type: object
Example:
callbacks: { beforeOpen: function(){}, open: function(){}, afterOpen: function(){}, beforeClose: function(){}, close: function(){}, afterClose: function(){} }
beforeOpen
Called before the info window attempts to open. Return false
to cancel the open.
Type: function
Example:
function() { console.log('Cancel opening the info window.'); return false; }
open
Called when the info window is opening. This occurs at the end of the
OverlayView onAdd()
implementation. At this point the info window is added
to the DOM but is not drawn yet.
Type: function
Example:
function() { console.log('Info window has started opening.'); }
afterOpen
Called when the info window has opened. This occurs at the end of the
OverlayView draw()
implementation. At this point the info window is added
to the DOM and should be visible.
Type: function
Example:
function() { console.log('Info window has opened.'); }
beforeClose
Called before the info window attempts to close. Return false
to cancel the close.
Type: function
Example:
function() { console.log('Cancel closing the info window.'); return false; }
close
Called when the info window is closing. This occurs at the beginning of the
OverlayView onRemove()
implementation. At this point the info window is still
in the DOM.
Type: function
Example:
function() { console.log('Info window has started closing.'); }
afterClose
Called after the info window has closed. This occurs at the end of the
OverlayView onRemove()
implementation. At this point the info window should
be removed from the DOM.
Type: function
Example:
function() { console.log('Info window has closed.'); }
HTML Structure
<div class="si-float-wrapper">
<div class="si-wrapper-top">
<div class="si-shadow-wrapper-top">
<div class="si-shadow-frame"></div>
<div class="si-shadow-pointer-top">
<div class="si-shadow-inner-pointer-top"></div>
</div>
</div>
<div class="si-content-wrapper">
<button class="si-close-button"></div>
<div class="si-content">
<!-- Your content goes here -->
</div>
</div>
<div class="si-pointer-border-top"></div>
<div class="si-pointer-bg-top"></div>
</div>
</div>
si-float-wrapper
Used to absolute position the info window in the Google Maps floatPane.
si-wrapper-placement
Used to css translate the info window into the placement
. The wrapperClass
is added to this element's class list.
si-shadow-wrapper-placement
Used to blend opacity for all shadow elements. This div will not be included if
shadow
is false
.
si-shadow-frame
Used to create the box shadow for the content wrapper. This element will not be
included if shadow
is false
.
si-shadow-pointer-placement
Used to show the pointer shadow in the placement
. This element will not be included if
shadow
or pointer
is false
.
si-shadow-inner-pointer-placement
Used to create the shadow for the pointer. This element will not be included if
shadow
or pointer
is false
.
si-content-wrapper
Used for adding padding and border around the content.
si-close-button
Used for showing the default close button in the top right hand corner. This
element will not be included if showCloseButton
is false
.
si-content
Used for wrapping your content and showing a scroll bar when there is overflow.
si-pointer-border-placement
Used for rendering the tip of the pointer when there is a border present.
This element will not be included if pointer
or border
is false
.
si-pointer-bg-placement
Used for rendering the inner tip of the pointer when there is a border present.
This element will not be included if pointer
is false
.
Contributing
If you find a bug with the library, please open an issue. If you would like fix an issue or contribute a feature, follow the steps outlined here.