paper-map-info.html

<!--
@license
Copyright (c) 2016 Murray Lisook. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
-->

<!--
The `paper-map-info` element renders an infowindow on a Google Map.

Why you ask?  Because the native infowindow does not support event handlers
within the infowindow, e.g. <paper-button on-tap="doStuff">Stuff</paper-button>.

<paper-map-info> is more composable. It should work with any elements and event bindings.
You could even include <iron-pages> inside the window.

Hopefully, this is a temporary solution and the issues with interactive content
in the native infowindow will be resolved. It is being worked on.

<b>Example</b>:

<google-map latitude="40.7555" longitude="-73.985" on-google-map-ready="_mapReady" fit-to-markers>
  <template is="dom-repeat" items="[[friends]]" as="f">
    <google-map-marker click-events latitude="[[f.lat]]" longitude="[[f.lng]]" on-google-map-marker-click="_markerClick">
    </google-map-marker>
  </template>
  <paper-map-info id="myinfocard" fade-in>
    <div class="layout horizontal">
      <img src$="[[selectedFriend.picture]]" alt$="[[selectedFriend.name]]" >
      <paper-icon-button icon="communication:chat" on-tap="_startFriendChat"></paper-icon-button>
    </div>
  </paper-map-info>
</google-map>

_markerClick: function(e) {
  this.selectedFriend = e.model.get('f');
  this.$.myinfocard.showInfoWindow(e.srcElement.marker);
},
_startFriendChat: function(e) {
  ... do something with this.selectedFriend to chat
}

-->
<script src="../underscore/underscore.js"></script>
<link rel="import" href="../polymer/polymer.html" />
<link rel="import" href="../polymer-ts/polymer-ts.html" />
<link rel="import" href="../paper-material/paper-material.html" />
<link rel="import" href="../iron-icon/iron-icon.html" />
<link rel="import" href="../resize-aware/resize-aware.html" />
<link rel="import" href="paper-map-info-icons.html"  />

<!--
An element providing a solution to no problem in particular.

Example:

    <paper-map-info></paper-map-info>

Example:

    <paper-map-info>
      <h2>Hello paper-map-info</h2>
    </paper-map-info>

@demo demo/index.html
@hero hero.svg
-->

<dom-module id="paper-map-info">
  <template>
    <style>
      :host {
        display: inline-block;
      }

      .infocard {
        position: absolute;
        z-index: 999;
        max-width: 80%;
        max-height: 75%;
        top: 0;
        left: 0;
        background: white;
        box-sizing: border-box;
        padding: 12px 28px 12px 12px;
        border-radius: 4px;
        opacity: 0;
        display: none;
        @apply(--paper-map-info-mixin);
      }

      .infocard-beak {
        position: absolute;
        opacity: 0;
        display: none;
      }

      #stdbeak svg rect {
        fill: blue;
        stroke: black;
        stroke-width: 1;
        @apply(--paper-map-info-beak-mixin)
      }

      div.card-content {
        overflow: hidden;
        @apply(--paper-map-info-content)
      }

      iron-icon.closeicon {
        --iron-icon-width: 24px;
        --iron-icon-height: 24px;
        position: absolute;
        right: 3px;
        top: 3px;
      }
    </style>
    <div id="stdbeak" class="infocard-beak">
      <svg width="20" height="20">
        <rect x="4" y="4" width="12" height="12" transform="rotate(45 10,10)">
      </svg>
    </div>
    <div id="custombeak" class="infocard-beak">
      <content id="custombeakcontent" select=".paper-map-info-beak"></content>
    </div>
    <paper-material id="infocarddiv" class="infocard" elevation="[[elevation]]">
      <resize-aware>
        <div class="card-content">
          <content id="cardcontent" select="*"></content>
        </div>
      </resize-aware>
      <iron-icon class="closeicon" icon="papmapinf:close" on-tap="close"></iron-icon>
    </paper-material>

  </template>
  <script src="paper-map-info.js"></script>
</dom-module>