A customizable Google Map infowindow

[ 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>

Install

Link to this version
ImportedReleased 13 December 2017Other
Framework Support
Polymer 2.0+
Browser Compatibility
Install with
Release notes - 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