title: Pass array and/or object data between Polymer elements
body: <p>I'm setting up a custom google maps Polymer element called "locator-map" that uses polymer-jsonp to grab data from a google spreadsheet, take the response, and send it off to a custom "google-map" element to plot the markers on the map.  I can't seem to figure out how to actually inject the data coming back from the polymer-jsonp element into my google-map element so that it can use it to construct the markers.</p>
  
  <p>Here's my data source:
  <a href="https://spreadsheets.google.com/feeds/list/0Ao_YrKZEsc4AdGppeG1zaGotRDd0LUdIYk9tdW9VZnc/od6/public/values?alt=json-in-script">https://spreadsheets.google.com/feeds/list/0Ao_YrKZEsc4AdGppeG1zaGotRDd0LUdIYk9tdW9VZnc/od6/public/values?alt=json-in-script</a></p>
  
  <p>I followed directions here to set this up initially:
  <a href="http://www.html5rocks.com/en/tutorials/webcomponents/yeoman/">http://www.html5rocks.com/en/tutorials/webcomponents/yeoman/</a></p>
  
  <p>Code for my locator-map element:</p>
  
  <pre><code>&lt;link rel="import" href="../bower_components/polymer/polymer.html"&gt;
  &lt;link rel="import" href="../bower_components/polymer-jsonp/polymer-jsonp.html"&gt;
  &lt;link rel="import" href="google-map.html"&gt;
  
  &lt;polymer-element name="locator-map" attributes=""&gt;
    &lt;template&gt;
        &lt;style&gt;
            /* styles for the custom element itself - lowest specificity */
            :host { display: block; }
            google-map {
                display:block;
                height:600px;
            }
        &lt;/style&gt;
  
        &lt;!-- 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&amp;callback=
            Source: https://docs.google.com/spreadsheet/ccc?key=0AqZBbhllhMtHdFhFYnRlZk1zMzVZZU5WRnpLbzFYVFE&amp;usp=sharing
        --&gt;
        &lt;polymer-jsonp auto url="https://spreadsheets.google.com/feeds/list/0Ao_YrKZEsc4AdGppeG1zaGotRDd0LUdIYk9tdW9VZnc/od6/public/values?alt=json-in-script&amp;callback=" response="{{locations}}"&gt;&lt;/polymer-jsonp&gt;
  
        &lt;ul&gt;
            &lt;template repeat="{{location in locations.feed.entry}}"&gt;
                &lt;li&gt;Name: {{location.gsx$name.$t}}
                  &lt;ul&gt;&lt;li&gt;Lat: {{location.gsx$lat.$t}}&lt;/li&gt;&lt;li&gt;Long: {{location.gsx$lng.$t}}&lt;/li&gt;&lt;/ul&gt;
                &lt;/li&gt;
            &lt;/template&gt;
        &lt;/ul&gt;
  
        &lt;!-- Load the Google Map --&gt;
        &lt;google-map map="{{map}}" latitude="45.526158" longitude="-122.679394" zoom="14" markers="{{locations}}"&gt;&lt;/google-map&gt;
  
    &lt;/template&gt;
    &lt;script&gt;
      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) { }
      });
    &lt;/script&gt;
  &lt;/polymer-element&gt;
  </code></pre>
  
  <p>Code for my google-map element:</p>
  
  <pre><code>&lt;link rel="import" href="../bower_components/polymer/polymer.html"&gt;
  
  &lt;polymer-element name="google-map" attributes="latitude longitude zoom showCenterMarker map markers"&gt;
      &lt;template&gt;
          &lt;style&gt;
              :host {
                  position: relative;
              }
  
              #map {
                  position: absolute;
                  top: 0;
                  right: 0;
                  bottom: 0;
                  left: 0;
              }
          &lt;/style&gt;
  
          &lt;div id="map"&gt;&lt;/div&gt;
      &lt;/template&gt;
      &lt;script&gt;
          (function() {
              var CALLBACK_NAME = 'polymer_google_map_callback';
              var MAP_URL = 'https://maps.googleapis.com/maps/api/js?v=3.exp&amp;libraries=places&amp;sensor=false&amp;callback=' + CALLBACK_NAME;
              var pendingCallbacks = [];
              var loading;
  
              function loadMapApi(callback) {
                  if (window.google &amp;&amp; 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 &amp;&amp; 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
                              });
                          });
                      }
  
                  }
  
              });
          })();
      &lt;/script&gt;
  &lt;/polymer-element&gt;
  </code></pre>
  
  <p>On my console I get a "this.markers is null".  What am I doing wrong?</p>