Try this in your auto-binding template
...
<hill-station lat="{{$.map.latt}" lng="{{$.map.llng}"></hill-station>
...
<gmap-element id="map"></gmap-element>
..
I'm not 100% positive this works in auto-binding templates, but this works
when other polymer elements. You shouldn't need events in this case when
you're sharing simple values.
On Tuesday, March 3, 2015 at 7:36:02 AM UTC-5, [email protected] wrote:
>
> Hi,
> I am trying to communicate between two polymer elements which are probably
> not typical bound in a "prent-child" relationship.
> Here is what I am trying to do (using scaffold):
>
> I have one polymer element where I am binding a list of places (drawer)
> and the other one is the main which is holding a simple <google-map>
> element wrapped inside my custom element.
>
> My objective is to click on a place listed in drawer panel and pass the
> lat/lng values to the custom map element which would eventually be passed
> to latitude and longitude values of <google-map> so that it pans itself
> according to the latest values.
>
> I am reading https://www.polymer-project.org/articles/communication.html
> but somehow I am getting lost somewhere.
>
> Below are my elements:
>
> 1. Google Map custom element
> ---------------------------------------------------
> <polymer-element name="gmap-element" attributes="latt lngg">
> <template>
> <link rel="stylesheet" href="gmap-element.css">
> <style>
> google-map{
> width:100%;
> height:100%;
> }
>
> </style>
> <div flex>
> <google-map id="google-map" latitude="{{latt}}"
> longitude="{{lngg}}" zoom="9" fit mapType="satellite">
> <google-map-marker latitude="{{latt}}" longitude="{{lngg}}"
> draggable></google-map-marker>
> </google-map>
> </div>
> </template>
> <script>
> (function (document) {
> //Reference URL:
> http://stackoverflow.com/questions/28374352/auto-binding-dart-is-not-working-fails-with-bad-state-error
> Polymer('gmap-element', {
> publish:{
> latt: 32.2167785,
> lngg: 76.319165
> },
> panMap: function(){
> this.fire('pan-map', {latt: this.latt, lngg: this.lngg})
> }
> });
> })(wrap(document));
> </script>
> </polymer-element>
>
>
> 2. Places custom element
> --------------------------------------------------
> <polymer-element name="hill-station" attributes="lat lng">
> <template>
> <link rel="stylesheet" href="hill-station.css">
> <template repeat="{{location in locations}}">
> <core-item icon="settings" label="{{location.name}}">
> <a href="javascript:;" on-tap={{showLocation}}></a>
> </core-item>
> </template>
> </template>
> <script>
> (function () {
> Polymer('hill-station', {
> ready: function(){
> this.locations = [
> {"name" : "Dharamsala", "state": "Himachal Pradesh",
> "lat": 32.2167785, "lng": 76.319165},
> {"name" : "Manali", "state": "Himachal Pradesh", "lat":
> 32.236378, "lng": 77.1871198},
> {"name" : "Shimla", "state": "Himachal Pradesh", "lat":
> 31.0782194, "lng": 77.1590212},
> {"name" : "Rudraprayag", "state": "Uttarakhand", "lat":
> 30.2853912, "lng": 78.9797152},
> {"name" : "Kedarnath", "state": "Uttarakhand", "lat":
> 30.7344815, "lng": 79.0669351},
> {"name" : "Auli", "state": "Uttarakhand", "lat":
> 30.9494166, "lng": 77.7478028},
> {"name" : "Darjeeling", "state": "West Bengal", "lat":
> 27.0331949, "lng": 88.2646751},
> {"name" : "Bindu", "state": "West Bengal", "lat":
> 27.1003216, "lng": 88.8709563},
> ];
> },
> showLocation: function(e, detail, sender){
> var loc = e.target.templateInstance.model.location;
> /*var myMap=document.querySelector("#app_map");
> alert(myMap);*/
> alert(loc.name + ". " + loc.lat + ". " + loc.lng);
> /*this.fire('location-selected', {lat: this.lat, lng:
> this.lng});*/
> },
> });
> })();
> </script>
> </polymer-element>
>
> 3. Index.html
> --------------------------------------------------
> <template is="auto-binding" id="app">
> <core-drawer-panel>
> <!-- Drawer -->
> <core-header-panel drawer>
> <!-- Drawer Toolbar -->
> <core-toolbar>Hill Stations of India</core-toolbar>
> <!-- Drawer Content -->
> <core-menu>
> <!--<user-list></user-list>-->
> <hill-station></hill-station>
> </core-menu>
> </core-header-panel>
> <!-- Main -->
> <core-header-panel main>
> <!-- Main Toolbar -->
> <core-toolbar>
> <paper-icon-button icon="menu"
> core-drawer-toggle></paper-icon-button>
> <span>{{appName}}</span>
> </core-toolbar>
> <div id="main_map_area">
> <gmap-element></gmap-element>
> </div>
> </core-header-panel>
> </core-drawer-panel>
> </template>
>
> Looking forward to your suggestion as I am pretty new to the world of
> Polymer!
>
> Regards,
> Subrata Sarkar
>
>
> On Wednesday, 27 August 2014 18:44:47 UTC+5:30, Darshan Udayashankar wrote:
>>
>> Hi All,
>>
>> I have 2 polymer elements in which I am listing the data using repeat
>> option. Inside the same polymer, am using 1 more polymer element which we
>> need provide the option to sort and filter the list based on the selection
>> in the HTML Select control.
>>
>> I saw the *Communication and Message Passing *available in the Polymer
>> documentation, There the messages are sent from Parent Element to Child
>> Element. In my scenario I need to do it the other way. Based on the
>> selection in the client (HTML Select Control) I need to filter or sort the
>> list.
>>
>> Please let me know is there any Polymer alternative for HTML Select
>> Control and if possible please provide a link with sample which will of
>> great help.
>>
>> Thanks in advance.
>>
>> Regards
>> Darshan
>>
>> *HIPAA Confidentiality Message:* Any document(s) and/or message(s)
>> within this electronic transmission may contain confidential and
>> proprietary information that is intended only for the authorized
>> recipient(s). This communication belongs to the sender who is legally
>> privileged. If you are not the intended recipient, or if you have received
>> this email in error, you are hereby requested to notify the sender
>> immediately and delete the email and any attachment(s). Disclosure,
>> copying, distribution or taking action according to the content is strictly
>> prohibited.
>>
>
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/60d75955-f2bc-4173-8f25-028528585bac%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.
