Contact us Create app

Directory

← Back

custom-gmap-infowindow

A customizable Google Map infowindow

Author

Rating

Links

Popularity

<100

[ This description is mirrored from README.md at github.com/DoubleTrade/custom-gmap-infowindow on 2019-05-10 ]

Build status Published on webcomponents.org

<custom-gmap-infowindow>

Currently (as of August 2017) the google-map component infowindow does not support event handlers (#288) and CSS style classes due to shadow DOM restrictions.

custom-gmap-infowindow provides a simple and customizable infowindow element for google-map web component.

This component is a fork from plastic-map-info by @mislook

Install

bower install DoubleTrade/custom-gmap-infowindow

Browser support

Chrome, Firefox, IE 11+/, Edge, Safari.

Styling

<custom-gmap-infowndow> provides the following custom properties and mixins for styling:

Custom property Description Default
--custom-gmap-infowindow Mixin applied to the infowindow {}
--custom-gmap-infowindow-caret-size Mixin applied to the infowindow bottom caret 15px
--custom-gmap-infowindow-caret-color Mixin applied to the infowindow bottom caret #fff
--custom-gmap-infowindow-caret-border-size Mixin applied to the infowindow bottom caret border 17px
--custom-gmap-infowindow-caret-border-color Mixin applied to the infowindow bottom caret border rgba(0, 0, 0, 0.3)
--custom-gmap-infowindow-close-icon Mixin applied to the infowindow close button icon {}

Example

<google-map click-events fit-to-markers api-key="AIzaSyD3E1D9b-Z7ekrT3tbhl_dy8DCXuIuDDRc">
  <google-map-marker click-events slot="markers" latitude="49.183333" longitude="-0.350000"></google-map-marker>
  <custom-gmap-infowindow hide-marker-on-click>
    <div class="layout vertical">
      <h3>Caen</h3>
      <img src="https://www.normandyalacarte.com/wp-content/uploads/2016/05/880px-Normandie_Calvados_Caen1_tango7174-300x100.jpg" width="300" height="100">
      <p>Caen is a commune in northwestern France. It is the prefecture of the Calvados department. The city proper has 108,365 inhabitants (as of 2012), while its urban area has 420,000, making Caen the largest city in former Lower Normandy.</p>
      <paper-button class="custom" raised onclick="handleClick()">CLICK ME !</paper-button>
    </div>
  </custom-gmap-infowindow>
</google-map>

Compatibility

(Loading compatibility data...)

Last updated: 2017-12-13

Was this helpful? Need more help?
Leave a comment or a question below. You can also join the chat on Discord or ask questions on StackOverflow.

Version

Dependencies

Polymer/polymer#^2.0.0

  • PolymerElements/iron-icon#^2.0.0
  • PolymerElements/iron-icons#^2.0.0
  • PolymerElements/paper-styles#^2.0.0
Released
2017-12-13
Maturity
IMPORTED
License
Other

Compatibility

Framework
Polymer 2.0+
Browser
Browser Independent

custom-gmap-infowindow - Vaadin Add-on Directory

A customizable Google Map infowindow custom-gmap-infowindow - Vaadin Add-on Directory
**[ This description is mirrored from README.md at [github.com/DoubleTrade/custom-gmap-infowindow](https://github.com//DoubleTrade/custom-gmap-infowindow/blob/0.0.6/README.md) on 2019-05-10 ]** [![Build status](https://travis-ci.org/DoubleTrade/custom-scrollbar.svg?branch=master)](https://travis-ci.org/DoubleTrade/custom-gmap-infowindow) [![Published on webcomponents.org](https://img.shields.io/badge/webcomponents.org-published-blue.svg)](https://www.webcomponents.org/element/doubletrade/custom-gmap-infowindow) ## <custom-gmap-infowindow> Currently (as of August 2017) the google-map component infowindow does not support event handlers ([#288](https://github.com/GoogleWebComponents/google-map/issues/288)) and CSS style classes due to shadow DOM restrictions. `custom-gmap-infowindow` provides a simple and customizable infowindow element for google-map web component. This component is a fork from [`plastic-map-info`](https://github.com/mlisook/plastic-map-info) by [@mislook](https://github.com/mlisook) ### Install `bower install DoubleTrade/custom-gmap-infowindow` - [See advanced demo](https://doubletrade.github.io/custom-gmap-infowindow/components/custom-gmap-infowindow/#/elements/custom-gmap-infowindow/demos/demo/index.html) - [See docs](https://doubletrade.github.io/custom-gmap-infowindow/components/custom-gmap-infowindow/#/elements/CustomGmapInfowindow) ### Browser support Chrome, Firefox, IE 11+/, Edge, Safari. ### Styling `` provides the following custom properties and mixins for styling: Custom property | Description | Default ---------------------------------------------|-----------------------------------------------------|---------- `--custom-gmap-infowindow` | Mixin applied to the infowindow | `{}` `--custom-gmap-infowindow-caret-size` | Mixin applied to the infowindow bottom caret | `15px` `--custom-gmap-infowindow-caret-color` | Mixin applied to the infowindow bottom caret | `#fff` `--custom-gmap-infowindow-caret-border-size` | Mixin applied to the infowindow bottom caret border | `17px` `--custom-gmap-infowindow-caret-border-color`| Mixin applied to the infowindow bottom caret border | `rgba(0, 0, 0, 0.3)` `--custom-gmap-infowindow-close-icon` | Mixin applied to the infowindow close button icon | `{}` ### Example ```html

Caen

Caen is a commune in northwestern France. It is the prefecture of the Calvados department. The city proper has 108,365 inhabitants (as of 2012), while its urban area has 420,000, making Caen the largest city in former Lower Normandy.

CLICK ME !
```
View on GitHub
GitHub Homepage
Issue tracker
License
Online Demo
Documentation

custom-gmap-infowindow version 0.0.1
### Dependencies Polymer/polymer#^2.0.0 * PolymerElements/iron-icon#^2.0.0 * PolymerElements/iron-icons#^2.0.0 * PolymerElements/paper-styles#^2.0.0

custom-gmap-infowindow version 0.0.2
### Dependencies Polymer/polymer#^2.0.0 * PolymerElements/iron-icon#^2.0.0 * PolymerElements/iron-icons#^2.0.0 * PolymerElements/paper-styles#^2.0.0

custom-gmap-infowindow version 0.0.3
### Dependencies Polymer/polymer#^2.0.0 * PolymerElements/iron-icon#^2.0.0 * PolymerElements/iron-icons#^2.0.0 * PolymerElements/paper-styles#^2.0.0

custom-gmap-infowindow version 0.0.4
### Dependencies Polymer/polymer#^2.0.0 * PolymerElements/iron-icon#^2.0.0 * PolymerElements/iron-icons#^2.0.0 * PolymerElements/paper-styles#^2.0.0

custom-gmap-infowindow version 0.0.5
### Dependencies Polymer/polymer#^2.0.0 * PolymerElements/iron-icon#^2.0.0 * PolymerElements/iron-icons#^2.0.0 * PolymerElements/paper-styles#^2.0.0

custom-gmap-infowindow version 0.0.6
### Dependencies Polymer/polymer#^2.0.0 * PolymerElements/iron-icon#^2.0.0 * PolymerElements/iron-icons#^2.0.0 * PolymerElements/paper-styles#^2.0.0

Online