{"id":13397943,"url":"https://github.com/atmist/snazzy-info-window","last_synced_at":"2025-10-22T12:43:47.888Z","repository":{"id":53374930,"uuid":"67885288","full_name":"atmist/snazzy-info-window","owner":"atmist","description":"Customizable info windows using the Google Maps JavaScript API.","archived":false,"fork":false,"pushed_at":"2022-10-22T14:53:03.000Z","size":1103,"stargazers_count":608,"open_issues_count":24,"forks_count":125,"subscribers_count":34,"default_branch":"master","last_synced_at":"2024-05-17T19:02:36.195Z","etag":null,"topics":["google-maps","google-maps-api","info-window","snazzy"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/atmist.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2016-09-10T17:38:39.000Z","updated_at":"2024-04-03T18:49:31.000Z","dependencies_parsed_at":"2022-08-30T20:00:55.480Z","dependency_job_id":null,"html_url":"https://github.com/atmist/snazzy-info-window","commit_stats":null,"previous_names":[],"tags_count":4,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/atmist%2Fsnazzy-info-window","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/atmist%2Fsnazzy-info-window/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/atmist%2Fsnazzy-info-window/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/atmist%2Fsnazzy-info-window/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/atmist","download_url":"https://codeload.github.com/atmist/snazzy-info-window/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243505143,"owners_count":20301558,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["google-maps","google-maps-api","info-window","snazzy"],"created_at":"2024-07-30T18:01:55.906Z","updated_at":"2025-10-22T12:43:42.838Z","avatar_url":"https://github.com/atmist.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"# Snazzy Info Window\n\n[![npm](https://img.shields.io/npm/v/snazzy-info-window.svg?label=yarn)](https://www.npmjs.com/package/snazzy-info-window) [![npm](https://img.shields.io/npm/v/snazzy-info-window.svg)](https://www.npmjs.com/package/snazzy-info-window) [![Bower](https://img.shields.io/bower/v/snazzy-info-window.svg)](https://github.com/atmist/snazzy-info-window) [![Dependencies](https://david-dm.org/atmist/snazzy-info-window.svg)](https://david-dm.org/atmist/snazzy-info-window) [![devDependencies](https://david-dm.org/atmist/snazzy-info-window/dev-status.svg)](https://david-dm.org/atmist/snazzy-info-window#info=devDependencies)\n\nSnazzy Info Window is a plugin for customizable info windows using the Google Maps JavaScript API.\nOpen sourced by the people that created [Snazzy Maps](https://snazzymaps.com).\n\n## Features\n\n- **Responsive sizing**\n  - The info window will size properly for a variety of screen and map sizes.\n- **Custom styling**\n  - Customize the border radius, shadow, background color, border, and much more.\n  - Supports SCSS styling.\n- **Dynamic content**\n  - Supports dynamic content after initialization with proper resizing.\n- **Multiple placements**\n  - Place the info window to the top, bottom, right, or left of the marker.\n\n## Examples\n\n- [Simple](/examples#simple)\n- [Multiple markers](/examples#multiple-markers)\n- [Dynamic content](/examples#dynamic-content)\n- [Set position](/examples#set-position)\n- [Styling with SCSS](/examples#scss-styles)\n- [Styling with JavaScript](/examples#js-styles)\n- [Complex styling](/examples#complex-styles)\n\n## Installation\n\nYou can install Snazzy Info Window from the following package managers:\n\n```sh\nyarn add snazzy-info-window\n```\n\n```sh\nnpm install --save snazzy-info-window\n```\n\n```sh\nbower install --save snazzy-info-window\n```\n\n## Quick Start\n1. Include all the required files.\n\n  ```html\n  \u003clink rel=\"stylesheet\" href=\"snazzy-info-window.min.css\"\u003e\n  \u003cscript src=\"https://maps.googleapis.com/maps/api/js?key={{YOUR KEY HERE}}\"\u003e\u003c/script\u003e\n  \u003cscript src=\"snazzy-info-window.min.js\"\u003e\u003c/script\u003e\n  ```\n\n1. Create a new `SnazzyInfoWindow` object with a marker.\n  ```js\n  var infoWindow = new SnazzyInfoWindow({\n      marker: marker,\n      content: 'Snazzy!'\n  });\n  ```\n\n## Public Methods\n\n#### open()\n\nWill attempt to open the info window.\n\n#### close()\n\nWill attempt to close the info window.\n\n#### isOpen()\n\nDetermines if the info window is open.\n\n#### destroy()\n\nWill destroy the info window. If the info window is open it will be forced\nclosed bypassing the regular `beforeClose` callback. All Google Map event\nlisteners associated to this info window will be removed.\n\n#### setContent(content)\n\nSet the content in the info window. This can be called at any time.\n\n- Parameter: `content`\n  - _string_ or _DOM Element_\n\n#### setPosition(latLng)\n\nSet 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.\n\n- Parameter: `latLng`\n  - _[LatLng]_ or _[LatLngLiteral]_\n\n#### setWrapperClass(wrapperClass)\n\nSet the `wrapperClass` of the info window. This can be called at any time.\n\n- Parameter: `wrapperClass`\n  - _string_\n\n#### getWrapper()\n\nWill return the DOM Element for the wrapper container of the info window.\n\n## Options\n\n#### marker\n\nThe Google Maps marker associated to this info window.\n\n- Type: _[Marker]_\n\n#### content\n\nThe text or DOM Element to insert into the info window body.\n\n- Type: _string_ or _DOM Element_\n\n#### placement\n\nChoose where you want the info window to be displayed, relative to the marker.\n\n- Type: _string_\n- Default: `'top'`\n- Possible Values: `'top'`, `'bottom'`, `'left'`, `'right'`\n\n#### map\n\nThe Google Map associated to this info window. Only required if you are not using a `marker`.\n\n- Type: _[Map]_\n\n#### position\n\nThe 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`.\n\n- Type: _[LatLng]_ or _[LatLngLiteral]_\n\n#### wrapperClass\n\nAn optional CSS class to assign to the wrapper container of the info window. Can be\nused for applying custom CSS to the info window.\n\n- Type: _string_\n\n#### maxWidth\n\nThe max width in pixels of the info window.\n\n- Type: _numeric_\n- Example: `200`\n\n#### maxHeight\n\nThe max height in pixels of the info window.\n\n- Type: _numeric_\n- Example: `200`\n\n#### offset\n\nThe offset from the marker. This value should be different for each `placement`.\nBy default the offset is configured for the default Google Maps marker.\n\n- Type: _object_\n- Example:\n\n  ```js\n  offset: {\n    top: '10px',\n    left: '20px'\n  }\n  ```\n\n#### edgeOffset\n\nThe offset from the map edge in pixels which is used when panning an info window\ninto view.\n\n- Type: _object_\n- Example:\n\n  ```js\n  edgeOffset: {\n    top: 20,\n    right: 20,\n    bottom: 20,\n    left: 20\n  }\n  ```\n\n#### backgroundColor\n\nThe color to use for the background of the info window.\n\n- Type: _string_\n- Possible Values: Any valid CSS color value.\n- Examples: `'#FF0000'`, `'blue'`\n\n#### padding\n\nA custom padding size around the content of the info window.\n\n- Type: _string_\n- Possible Values: Any valid CSS size value.\n- Examples: `'10px'`, `'2em'`, `'5%'`\n\n#### border\n\nA custom border around the info window. Set to `false` to completely remove\nthe border. The units used for `border` should be the same as `pointer`.\n\n- Type: _object_ or _boolean_\n- Example:\n\n  ```js\n  border: {\n    width: '10px',\n    color: '#FF0000'\n  }\n  ```\n\n#### borderRadius\n\nA custom CSS border radius property to specify the rounded corners of the info window.\n\n- Type: _string_\n- Example: `'2px 20px'`\n\n#### fontColor\n\nThe font color to use for the content inside the body of the info window.\n\n- Type: _string_\n- Possible Values: Any valid CSS color value.\n- Examples: `'#FF0000'`, `'blue'`\n\n\n#### fontSize\n\nThe font size to use for the content inside the body of the info window.\n\n- Type: _string_\n- Possible Values: Any valid CSS font size value.\n\n#### pointer\n\nThe height of the pointer from the info window to the marker. Set to `false`\nto completely remove the pointer. The units used for `pointer` should be the\nsame as `border`.\n\n- Type: _string_ or _boolean_\n- Possible Values: Any valid CSS size value.\n- Example: `'10px'`\n\n#### shadow\n\nThe CSS properties for the shadow of the info window. Set to `false` to\ncompletely remove the shadow.\n\n- Type: _object_ or _boolean_\n- Default:\n\n  ```js\n  shadow: {\n      h: '0px',\n      v: '3px',\n      blur: '6px',\n      spread: '0px',\n      opacity: 0.5,\n      color: '#000'\n  }\n  ```\n\n#### openOnMarkerClick\n\nDetermines if the info window will open when the marker is clicked. An internal\nlistener is added to the Google Maps `click` event which calls the `open()`\nmethod.\n\n- Type: _boolean_\n- Default: `true`\n\n#### closeOnMapClick\n\nDetermines if the info window will close when the map is clicked. An internal\nlistener is added to the Google Maps `click` event which calls the `close()`\nmethod. This will not activate on the Google Maps `drag` event when the user is\npanning the map.\n\n- Type: _boolean_\n- Default: `true`\n\n#### closeWhenOthersOpen\n\nDetermines if the info window will close when any other Snazzy Info Window is opened.\n\n- Type: _boolean_\n- Default: `false`\n\n#### showCloseButton\n\nDetermines if the info window will show a close button.\n\n- Type: _boolean_\n- Default: `true`\n\n#### closeButtonMarkup\n\nThe text or DOM Element to replace the default close button. No click handler or\npositioning is added to your markup if you use this option.\n\n- Type: _string_ or _DOM Element_\n\n#### panOnOpen\n\nDetermines if the info window will be panned into view when opened.\n\n- Type: _boolean_\n- Default: `true`\n\n### callbacks\n\nAll callbacks are optional and can access the info window instance via `this`.\n\n- Type: _object_\n- Example:\n\n    ```js\n    callbacks: {\n        beforeOpen: function(){},\n        open: function(){},\n        afterOpen: function(){},\n        beforeClose: function(){},\n        close: function(){},\n        afterClose: function(){}\n    }\n    ```\n\n#### beforeOpen\n\nCalled before the info window attempts to open. Return `false`\nto cancel the open.\n\n- Type: _function_\n- Example:\n\n  ```js\n  function() {\n      console.log('Cancel opening the info window.');\n      return false;\n  }\n  ```\n\n#### open\n\nCalled when the info window is opening. This occurs at the end of the\nOverlayView `onAdd()` implementation. At this point the info window is added\nto the DOM but is not drawn yet.\n\n- Type: _function_\n- Example:\n\n  ```js\n  function() {\n      console.log('Info window has started opening.');\n  }\n  ```\n\n#### afterOpen\n\nCalled when the info window has opened. This occurs at the end of the\nOverlayView `draw()` implementation. At this point the info window is added\nto the DOM and should be visible.\n\n- Type: _function_\n- Example:\n\n  ```js\n  function() {\n      console.log('Info window has opened.');\n  }\n  ```\n\n#### beforeClose\n\nCalled before the info window attempts to close. Return `false`\nto cancel the close.\n\n- Type: _function_\n- Example:\n\n  ```js\n  function() {\n      console.log('Cancel closing the info window.');\n      return false;\n  }\n  ```\n\n#### close\n\nCalled when the info window is closing. This occurs at the beginning of the\nOverlayView `onRemove()` implementation. At this point the info window is still\nin the DOM.\n\n- Type: _function_\n- Example:\n\n  ```js\n  function() {\n      console.log('Info window has started closing.');\n  }\n  ```\n\n#### afterClose\n\nCalled after the info window has closed. This occurs at the end of the\nOverlayView `onRemove()` implementation. At this point the info window should\nbe removed from the DOM.\n\n- Type: _function_\n- Example:\n\n  ```js\n  function() {\n      console.log('Info window has closed.');\n  }\n  ```\n\n## HTML Structure\n\n```html\n\u003cdiv class=\"si-float-wrapper\"\u003e\n    \u003cdiv class=\"si-wrapper-top\"\u003e\n        \u003cdiv class=\"si-shadow-wrapper-top\"\u003e\n            \u003cdiv class=\"si-shadow-frame\"\u003e\u003c/div\u003e\n            \u003cdiv class=\"si-shadow-pointer-top\"\u003e\n                \u003cdiv class=\"si-shadow-inner-pointer-top\"\u003e\u003c/div\u003e\n            \u003c/div\u003e\n        \u003c/div\u003e\n        \u003cdiv class=\"si-content-wrapper\"\u003e\n            \u003cbutton class=\"si-close-button\"\u003e\u003c/div\u003e\n            \u003cdiv class=\"si-content\"\u003e\n                \u003c!-- Your content goes here --\u003e\n            \u003c/div\u003e\n        \u003c/div\u003e\n        \u003cdiv class=\"si-pointer-border-top\"\u003e\u003c/div\u003e\n        \u003cdiv class=\"si-pointer-bg-top\"\u003e\u003c/div\u003e\n    \u003c/div\u003e\n\u003c/div\u003e\n```\n\n#### si-float-wrapper\n\nUsed to absolute position the info window in the Google Maps floatPane.\n\n#### si-wrapper-`placement`\n\nUsed to css translate the info window into the `placement`. The `wrapperClass`\nis added to this element's class list.\n\n#### si-shadow-wrapper-`placement`\n\nUsed to blend opacity for all shadow elements. This div will not be included if\n`shadow` is `false`.\n\n#### si-shadow-frame\n\nUsed to create the box shadow for the content wrapper. This element will not be\nincluded if `shadow` is `false`.\n\n#### si-shadow-pointer-`placement`\n\nUsed to show the pointer shadow in the `placement`. This element will not be included if\n`shadow` or `pointer` is `false`.\n\n#### si-shadow-inner-pointer-`placement`\n\nUsed to create the shadow for the pointer. This element will not be included if\n`shadow` or `pointer` is `false`.\n\n#### si-content-wrapper\n\nUsed for adding padding and border around the content.\n\n#### si-close-button\n\nUsed for showing the default close button in the top right hand corner. This\nelement will not be included if `showCloseButton` is `false`.\n\n#### si-content\n\nUsed for wrapping your content and showing a scroll bar when there is overflow.\n\n#### si-pointer-border-`placement`\n\nUsed for rendering the tip of the pointer when there is a border present.\nThis element will not be included if `pointer` or `border` is `false`.\n\n#### si-pointer-bg-`placement`\n\nUsed for rendering the inner tip of the pointer when there is a border present.\nThis element will not be included if `pointer` is `false`.\n\n\n## Contributing\n\nIf you find a bug with the library, please open an issue. If you would like fix\nan issue or contribute a feature, follow the steps outlined\n[here](./CONTRIBUTING.md).\n\n\n[LatLng]: https://developers.google.com/maps/documentation/javascript/reference#LatLng\n[LatLngLiteral]: https://developers.google.com/maps/documentation/javascript/reference#LatLngLiteral\n[Marker]: https://developers.google.com/maps/documentation/javascript/reference#Marker\n[Map]: https://developers.google.com/maps/documentation/javascript/reference#Map\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fatmist%2Fsnazzy-info-window","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fatmist%2Fsnazzy-info-window","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fatmist%2Fsnazzy-info-window/lists"}