plastic-map-info

A fully composable element that displays a paper-material backed infowindow-like card on a element
or a google map instantiated by the Google Maps Javascript API, at the position of a map marker.



- plastic-map-info
- Versions and Installation
- Polymer 3.0
- Polymer 2.x
- Polymer 1.x
- Live Demos
- WHY!?
- Normal Infowindow Functionality Supported
- Sample Usage
- Example Using the google-map Element
- Example Using Google Map Javascript API
- Other Google Map elements
- Composable
- Styling
- Issues and Contributions
- License

Versions and Installation

$3

To use this element in a Polymer 3.0 project, use npm or yarn to install.
``
// For Polymer 3 use npm or yarn
npm i --save plastic-map-info
// or
yarn add plastic-map-info
`

$3

To use this element in a Polymer 2.x project, use bower to install.
`
// for Polymer 2 use bower
bower install --save plastic-map-info^0.0.8
`

$3

A prior version of this element for Polymer 1.x, paper-map-info, is still available. You may install that version
with:

bower install --save paper-map-info

Note that the 1.0 version was "paper" and the 2.0/3.0 version is "plastic".

Live Demos

At the Github Project Page you will find multiple live demos and the source code behind them.

WHY!?

In its current implementation (as of June 2018) the native infowindow does not support event handlers, so interactive infowindows are out. For example, something as simple as this:
`html

Reserve
...

`
This will _not work_ because all bindings are lost when the infowindow is built. There is an issue open (#288), it has been open for more than 2 years, but as of now it is not resolved.

Additionally, the native infowindow does not support the use of CSS style classes under native shadow dom (classes work under shady dom).

These issues have to do with the way native infoWindow works and the way google-map-marker has to copy the infoWindow content, effectively moving the marker content from light DOM of the google-map-marker to shadow DOM of the google-map. This can't really be fixed in google-map-marker while continuing to use the native infoWindow and it seems very unlikely the native infoWindow would be modified to support the Polymer element scenario. Therefore, I believe the issue will persist indefinately.

If you don't need event handlers, and will style your elements in the infowindow only with style="..." on each tag, _use the native infowindow_. If you do need interaction, events, animation or CSS style classes, this element is fully composable.

Normal Infowindow Functionality Supported

Normal Google Map infowindow behavior is supported, including moving the window as the user pans the map, changes zoom, or drags the marker. The behavior where the map pans automatically to allow the infowindow to be displayed when the clicked marker was too close to an edge is also supported. In addition, since dynamic content is allowed, if the size of the content changes, the position of the window will adjust accordingly.

Sample Usage

$3

`html

[[selectedSalon.name]]

Book an Appointment

`
`javascript
markerClick(e) {
this.selectedSalon = e.model.get('s');
this.$.myinfocard.showInfoWindow(e.srcElement.marker);
}
`

$3

This sample does not use the google-map element. It just instantiates a Google Map via the Javascript API.

`html

[[_selectedLocation.title]]


[[_selectedLocation.dates]]


Parking Loc: [[_selectedLocation.parkingLocation]]


[[_selectedLocation.circuitName]]


`
`javascript
_mapsApiLoaded(e) {
this._theMap = new google.maps.Map(this.$.mapcontainerdiv, {
zoom: 4,
center: {
lat: 43.923,
lng: -121.3465
}
});
}
addMarker(loc) {
let m = new google.maps.Marker({
position: loc.latLng,
title: loc.title,
map: this._theMap
});
this._locationMarkers.push(m); // keep marker refs so they can be removed later
this._addMarkerListener(m, loc);
}
/**
* add a click event listener, capturing the marker and location
*/
_addMarkerListener(marker, location) {
google.maps.event.addListener(marker, 'click', (e) => {
this._markerClick(marker, location, e);
});
}
/**
* Handle marker click
* @param {marker} marker - google maps marker
* @param {object} location - location object
* @param {object} e - click event data
*/
_markerClick(marker, location, e) {
this._selectedLocation = location;
this.$.infowin.showInfoWindow(marker);
}
`

$3

This element should also work with other elements that implement the Google Map Javascript API. If you have difficulty, please file an issue and I'll assist.

$3

The element is meant to be fully composable so you can have anything inside, even iron-pages, streaming data charts, etc., if you want.

Styling

You can style the content of the infoWindow with CSS classes or style="...".

The paper-material background can be customized by using the --plastic-map-info-mixin.

The style of the beak (pointer from the card to the pin) can be modified with the --plastic-map-info-beak-mixin.

The inner container which holds your infoWindow content can be modified with the --plastic-map-info-content mixin.

You can replace the default beak entirely by providing your own image or svg in a div marked slot="info-beak" inside the content of the paper-map-info:
`html