Skip to content
A customizable Google Map infowindow
JavaScript HTML
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
demo
test
.eslintrc
.gitignore
.travis.yml
LICENSE
README.md
analysis.json
bower.json
custom-gmap-infowindow.html
custom-gmap-infowindow.js
index.html
package.json
polymer.json

README.md

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>
You can’t perform that action at this time.