Transfer data from an array and / or object between polymer elements

Question

I configure a custom Google Maps policy element called "map-locator-map" that uses polymer-jsonp to capture data from a google spreadsheet, accepts the response and sends it to its own "google-map" element to build markers on the map. I cannot figure out how to actually input the data returned from the polymer-jsonp element into my google-map element so that it can use it to build markers.

Here is my data source: https://spreadsheets.google.com/feeds/list/0Ao_YrKZEsc4AdGppeG1zaGotRDd0LUdIYk9tdW9VZnc/od6/public/values?alt=json-in-script

I followed the directions here to first install this: http://www.html5rocks.com/en/tutorials/webcomponents/yeoman/

Code for my locator map element:

<link rel="import" href="../bower_components/polymer/polymer.html"> <link rel="import" href="../bower_components/polymer-jsonp/polymer-jsonp.html"> <link rel="import" href="google-map.html"> <polymer-element name="locator-map" attributes=""> <template> <style> /* styles for the custom element itself - lowest specificity */ :host { display: block; } google-map { display:block; height:600px; } </style> <!-- Load Data with JSONP Endpoint (in this case Google Spreadsheets) Format: https://spreadsheets.google.com/feeds/list/0AhcraNy3sgspdDhuQ2pvN21JVW9NeVA0M1h4eGo3RGc/od6/public/values?alt=json-in-script&callback= Source: https://docs.google.com/spreadsheet/ccc?key=0AqZBbhllhMtHdFhFYnRlZk1zMzVZZU5WRnpLbzFYVFE&usp=sharing --> <polymer-jsonp auto url="https://spreadsheets.google.com/feeds/list/0Ao_YrKZEsc4AdGppeG1zaGotRDd0LUdIYk9tdW9VZnc/od6/public/values?alt=json-in-script&callback=" response="{{locations}}"></polymer-jsonp> <ul> <template repeat="{{location in locations.feed.entry}}"> <li>Name: {{location.gsx$name.$t}} <ul><li>Lat: {{location.gsx$lat.$t}}</li><li>Long: {{location.gsx$lng.$t}}</li></ul> </li> </template> </ul> <!-- Load the Google Map --> <google-map map="{{map}}" latitude="45.526158" longitude="-122.679394" zoom="14" markers="{{locations}}"></google-map> </template> <script> Polymer('locator-map', { // element is fully prepared ready: function(){ }, // instance of the element is created created: function() { }, // instance was inserted into the document enteredView: function() { }, // instance was removed from the document leftView: function() { }, // attribute added, removed or updated attributeChanged: function(attrName, oldVal, newVal) { } }); </script> </polymer-element> 

Code for my google-map element:

 <link rel="import" href="../bower_components/polymer/polymer.html"> <polymer-element name="google-map" attributes="latitude longitude zoom showCenterMarker map markers"> <template> <style> :host { position: relative; } #map { position: absolute; top: 0; right: 0; bottom: 0; left: 0; } </style> <div id="map"></div> </template> <script> (function() { var CALLBACK_NAME = 'polymer_google_map_callback'; var MAP_URL = 'https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=places&sensor=false&callback=' + CALLBACK_NAME; var pendingCallbacks = []; var loading; function loadMapApi(callback) { if (window.google && window.google.maps) { callback(); return; } if (!loading) { loading = true; window[CALLBACK_NAME] = mapApiLoaded.bind(this); var s = document.createElement('script'); s.src = MAP_URL; document.head.appendChild(s); } pendingCallbacks.push(callback); } function mapApiLoaded() { delete window[CALLBACK_NAME]; pendingCallbacks.forEach(function(callback) { callback(); }); } Polymer('google-map', { latitude: '37.77493', longitude: '-122.41942', zoom: 10, showCenterMarker: false, observe: { latitude: 'updateCenter', longitude: 'updateCenter' }, ready: function() { loadMapApi(this.mapReady.bind(this)); }, created: function() { }, enteredView: function() { this.resize(); }, mapReady: function() { // Create the Map this.map = new google.maps.Map(this.$.map, { zoom: this.zoom, center: new google.maps.LatLng(this.latitude, this.longitude) }); // Show Center Marker this.showCenterMarkerChanged(); // Add Markers (if any supplied) this.addMarkers(); // Fire the Map Ready Event this.fire('google-map-ready'); }, resize: function() { if (this.map) { google.maps.event.trigger(this.map, 'resize'); this.updateCenter(); } }, updateCenter: function() { if (!this.map) { return; } this.map.setCenter( new google.maps.LatLng(this.latitude, this.longitude)); this.showCenterMarkerChanged(); }, zoomChanged: function() { if (this.map) { this.map.setZoom(Number(this.zoom)); } }, showCenterMarkerChanged: function() { if (!this.map) { return; } if (!this.centerMarker && this.showCenterMarker) { this.centerMarker = new google.maps.Marker({ map: this.map }); } if (this.centerMarker) { this.centerMarker.setPosition(this.map.getCenter()); this.centerMarker.setMap(this.showCenterMarker ? this.map : null); } }, /* * Add Markers * Adds markers to the map. Expects an array of objects specifying the location information via name, lat and lng properties. * * @author erikharper */ addMarkers: function() { console.log("Markers: "); console.log(this.markers); // Get the Map instance var map = this.map; if(this.markers.isArray()) { // Create each Marker on the Map this.markers.forEach(function(marker){ // Create a LatLng object var markerLatLng = new google.maps.LatLng(marker.lat, marker.lng); // Create the Marker object and add it to the map via the map property new google.maps.Marker({ map: map, position: markerLatLng, title: marker.name }); }); } } }); })(); </script> </polymer-element> 

On my console, I get "this.markers is null". What am I doing wrong?

Answer 1

You have markers="{{locations}}" , which is a pure JSON response from the polymer-jsonp . I had to convert the data and parse the lat / lng first:

 var markers = []; markers.push({ lat: parseFloat(entry.gsx$lat.$t), lng: parseFloat(entry.gsx$lng.$t), name: entry.gsx$name.$t }); this.markers = markers; 

What I turned to is to reuse the existing google-map Polymer element: http://jsbin.com/wowuledo/6/edit

The important bit is that when you change the this.markers array, this.markers is markersChanged , which in turn calls your addMarkers (which I changed):

  markersChanged: function() { this.addMarkers(); }, addMarkers: function() { this.markers.forEach(function(marker) { var marker = new google.maps.Marker({ map: this.map, position: new google.maps.LatLng(marker.lat, marker.lng), title: marker.name }); }.bind(this)); } 

If you have to create an additional element to add your own properties / methods, why not inherit from google-maps ?

 <polymer-element name="google-map-with-markers" extends="google-map" attributes="markers"> 

This way you get all the functionality from google-maps , but you can bind the data to the published markers property:

 <google-map-with-markers latitude="45.526158" longitude="-122.679394" zoom="14" markers="{{markers}}"></google-map-with-markers> 

Try: http://jsbin.com/renuyifu/1/edit