I want to fire an event on mouse-drag-end (or any event) associated to google-map-marker using Polymer, but nothing fires.
<google-map latitude="{{latitude}}" longitude="{{longitude}}">
<google-map-marker latitude="{{latitude}}" longitude="{{longitude}}"
on-google-map-marker-mouseup="markerMoved"
draggable="true" mouse-events="true">
</google-map-marker>
</google-map>
Polymer({
markerMoved: function(event) { ... }
});
Am I missing something?
Related
i am trying to use google map webcomponents and i am trying to add multiple markers to the lat, longs location i followed the question creating a google map with marker using web-component i tried adding multiple markers but the markers are not getting added
<link rel="import" href="../../bower_components/polymer/polymer.html">
<link rel="import" href="../../bower_components/google-apis/google-
apis.html">
<link rel="import" href="../../bower_components/google-map/google-
map.html">
<dom-module id="map-view">
<template>
<google-map map="{{map}}" disableDefaultUI fitToMarkers>
<template is="dom-repeat" items="{{marker}}">
<google-map-marker map={{map}} latitude="{{item.latitudine}}"
longitude="{{item.longitudine}}">
</google-map-marker>
</template>
</google-map>
</template>
<script>
Polymer({
is:'map-view',
properties:{
marker:{
type:Array
}
},
ready: function() {
this.marker = [
{latitudine: '41.223596', longitudine: '16.296087'},
{latitudine: '41.222450', longitudine: '16.291259'}
];
}
});
</script>
</dom-module>
and i am using map-view inside another div but i am not able to get multiple markers
can anybody show jsfiddle how to add multiple marker to googlemap webcomponents?
The above code works perfectly. You are viewing map of U.S.A. and your markers point to Italy. Zoom out and check in Europe.
If you want to change default view near your markers, you can set latitude and longitude in google-map element also. Like <google-map map="{{map}}" latitude="41.223596" longitude="16.296087" disableDefaultUI fitToMarkers>. I am using one of the position you provided. You can use nearest latitude and longitude.
i'm trying to fire a custom event from a child element to its parent but its not working using listeners object. it works using annotated events but that isn't applicable in most situations.How can i use listeners object in this case. here's some code to illustrate the problem:
<!--in child element's dom..-->
<dom-module id="searchresult-controller">
<template>
<style>
...
</style>
</template>
<script type="text/javascript">
Polymer({
is: "searchresult-controller",
ready: function(){
this.sendSignal();
},
sendSignal: function() {
this.fire('msg', {data: 'i love polymer'});
}
});
</script>
</dom-module>
<!-- in parent -->
<dom-module id="search-controllers">
<template>
<style>
...
</style>
<searchresult-controller></searchresult-controller>
<result-view></result-view>
</template>
<script type="text/javascript">
Polymer({
is: "search-controllers",
listeners: {
'msg': '_showAlert'
},
_showAlert: function(e) {
console.log(e.detail.data);
}
});
</script>
Thanks in advance for your help.
Could you try firing the event from searchresult-controller on attached and not ready?
ready might be too soon for search-controllers to handle since, according to the docs, listeners set in the listeners object are set during the attached lifecycle event.
My guess is searchresult-controller's ready event happens before search-controllers's attached event.
I'm learning Polymer. I have a view that is setup like this:
my-view.html
<dom-module id="my-view">
<template>
<template is="dom-if" if="[[ areAvailable ]]">
<my-component id="myComponent"></my-component>
<button type="button" on-click="onButtonClick">Test</button>
</template>
<template is="dom-if" if="[[ !areAvailable ]]">
<div>Move along</div>
<template>
</template>
<script>
Polymer({
is:'my-view',
properties: {
areAvailable: Boolean
},
onButtonClick: function() {
this.$.myComponent.test();
}
});
</script>
</dom-module>
This view shows my-component based on the areAvailable flag. If a user clicks the "Test" button, I need to execute a function in my-component. my-component is setup like this:
my-component.html
<dom-module id="my-component">
<template>
<h1>hello there!</h1>
</template>
<script>
Polymer({
is:'my-component',
test: function() {
alert('voila!');
}
});
</script>
</dom-module>
My challenge is, my approach works IF my-component is not inside of an "if" template. When my-component is inside of an "if" template, I get an error that says:
TypeError: Cannot read property 'test' of undefined
What am I doing wrong?
Note: Nodes created dynamically using data binding (including those in dom-repeat and dom-if templates) are not added to the this.$ hash. The hash includes only statically created local DOM nodes (that is, the nodes defined in the element’s outermost template).
Source: https://www.polymer-project.org/1.0/docs/devguide/local-dom.html#node-finding
Since you have already added a listener to the click event on your button, you can redefine that listener like this:
Polymer({
...
onButtonClick: function() {
// The this.root here refers to the local dom
// It is highly advised that you use Polymer.dom(<node>) when doing dom manipulations
Polymer.dom(this.root).querySelector('#myComponent').test();
}
});
Polymer have this simple function...
this.$$('#myComponent')
https://www.polymer-project.org/1.0/docs/devguide/local-dom#node-finding
I'm using polymer 0.8 which I understand has a new API, but I can't find a reference to this issue anywhere. I'm trying to accomplish this:
<center-focusable>
<template is="x-autobind">
<span on-click="setFocus">test?</span>
</template>
</center-focusable>
Which errors out with:
[span].[click]: event handler [setFocus] is null in scope ()
My element is defined as such:
<dom-module id="center-focusable">
<template>
<span on-click="setFocus">I work</span>
<content></content>
</template>
</dom-module>
<script>
Polymer({
is: "center-focusable",
setFocus: function () {
console.log("test");
}
});
</script>
Is this not possible?
What I've ended up doing is to defined another custom element that will trigger a custom event for me to catch.
<dom-module id="focusable-element">
<content></content>
</dom-module>
<script>
Polymer({
is: "focusable-element",
listeners: {
'click': 'setFocus'
},
setFocus: function () {
this.fire("center-focusable:center");
}
});
</script>
Then I'll catch it:
<script>
Polymer({
is: "center-focusable",
listeners: {
'center-focusable:center': 'setFocus'
},
setFocus: function (e) {
e.stopPropagation();
console.log("test");
}
});
</script>
Together:
<center-focusable>
<focusable-element>
This works.
</focusable-element>
</center-focusable>
Seems like an unnecessary amount of effort to handle this way though.
<span> is a regular HTML element, not a polymer element.
on-click is a polymer syntax.
I think you should use a regular html event : onclick (no dash).
Ex : <span onclick="console.log('test')">I work</span>
I want to handle the click event of a marker on the map so I wanted to extend the google-map-marker. this is my-map-marker.html:
<link rel="import" href="../bower_components/google-map/google-map.html">
<polymer-element name="my-map-marker" extends="google-map-marker">
<script>
Polymer({
click: function() {
console.log("latitude:", this.latitude);
},
});
</script>
</polymer-element>
and I use it in another element as:
<paper-input value={{query}} label="Where?" floatingLabel></paper-input>
<google-map-search map="{{map}}" query="{{query}}" results="{{results}}"></google-map-search>
<google-map map="{{map}}" fitToMarkers>
<template repeat="{{results}}">
<my-map-marker latitude="{{latitude}}" longitude="{{longitude}}" clickEvents="true">
<h2>{{name}}</h2> {{formatted_address}}
</my-map-marker>
</template>
</google-map>
my code shows matching markers on map as i type location name if i use . but it gives this error code in developer console when I want to use :
Uncaught TypeError: Cannot read property 'setMap' of nullgoogle-map.html:197 Polymer.detachedpolymer.js:9961 base.detachedCallbackpolymer.js:7348 TemplateIterator.extractInstanceAtpolymer.js:7393 TemplateIterator.handleSplicespolymer.js:7301 TemplateIterator.valueChangedpolymer.js:7284 TemplateIterator.updateValuepolymer.js:7275 TemplateIterator.updateIteratedValuepolymer.js:4913 Observer.report_polymer.js:5180 createObject.check_polymer.js:4811 callback
How can I extend google-map-marker?
Based on Polymer documentation: "If you used extends to create a Polymer element that derives from an existing DOM element (something other than HTMLElement)", this syntax worked:
<google-map-marker is="my-map-marker" map="{{map}}" latitude="{{latitude}}" longitude="{{longitude}}">
<h2>{{name}}</h2> {{formatted_address}}
</google-map-marker>