I have following template:
<google-map-marker id="marker" latitude="[[asset.latitude]]"
longitude="[[asset.longitude]]" title="[[asset.lastUpdated]]"
icon="[[_getIcon(asset.speed, asset.lastUpdated, asset.heading,
asset.status)]]" click-events="true">
<div class="title">[[asset.id]] <paper-icon-button id="markerid"
icon="launch" on-tap="markerClicked"></paper-icon-button></div>
<div class="body">[[asset.speed]] mph</div>
<div class="body">[[_getDate(asset.lastUpdated)]]</div>
</google-map-marker>
My markerClicked is a simple function that fires a custom event.
Clicking or tapping on the paper-icon-button does nothing. No event is
generated. I tried replacing on-tap with a listener block as below and even
that didn't make any difference.
listeners: {
'markerid.tap': 'markerClicked'
}
Any pointers what could be wrong? Is it a known issue or bug?
Following is the complete source:
<!--
@license
Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at
http://polymer.github.io/LICENSE.txt
The complete set of authors may be found at
http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at
http://polymer.github.io/CONTRIBUTORS.txt
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at
http://polymer.github.io/PATENTS.txt
-->
<link rel="import" href="../../bower_components/polymer/polymer.html">
<link rel="import"
href="../../bower_components/paper-styles/typography.html">
<link rel="import"
href="../../bower_components/google-map/google-map-marker.html">
<link rel="import"
href="../../bower_components/google-apis/google-maps-api.html">
<link rel="import"
href="../../bower_components/paper-icon-button/paper-icon-button.html">
<dom-module id="aae-map-marker">
<template >
<style>
:host {
display: block;
}
span {
@apply(--paper-font-body1);
}
.markerinfo {
margin: 2px;
}
.card-content {
line-height: 70%;
}
.title {
@apply(--paper-font-title);
}
.body {
@apply(--paper-font-body1);
}
</style>
<google-map-marker id="marker" latitude="[[asset.latitude]]"
longitude="[[asset.longitude]]" title="[[asset.lastUpdated]]"
click-events="true">
<div class="title">[[asset.id]] <paper-icon-button id="markerid"
icon="launch" on-tap="markerClicked"></paper-icon-button></div>
<div class="body">[[asset.speed]] mph</div>
<div class="body">[[_getDate(asset.lastUpdated)]]</div>
</google-map-marker>
</template>
<script>
Polymer({
is: 'aae-map-marker',
properties: {
asset: {
type: Object
}
},
listeners: {
'markerid.tap': 'markerClicked'
},
marker: function() {
this.$.marker;
},
_getDate: function(timestamp) {
var date = new Date(timestamp);
return date.toLocaleString();
},
markerClicked: function() {
this.$.marker.fire('iron-signal', {name: 'assetupdate', data:
this.asset});
console.log("Asset Update signal fired");
}
});
</script>
</dom-module>
-Naren
Follow Polymer on Google+: plus.google.com/107187849809354688692
---
You received this message because you are subscribed to the Google Groups
"Polymer" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
To view this discussion on the web visit
https://groups.google.com/d/msgid/polymer-dev/d4d428ee-6938-4713-8b6b-1cdcac44e9bb%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.
