Pass array and/or object data between Polymer elements

eriklharper

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.

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

I followed directions here to set this up initially: 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 a "this.markers is null". What am I doing wrong?

ebidel

You have markers="{{locations}}", which is the pure JSON response from the polymer-jsonp component. I had to transform 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;

The way I approached was to reuse the existing Polymer google-map element: http://jsbin.com/wowuledo/6/edit

The important bit is that when the this.markers array changes, markersChanged gets called, which in turn calls your addMarkers (which I modified):

  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 must create an additional element to add your own properties/methods to, 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 can data-bind to the markers published 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

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at
0

Comments

0 comments
Login to comment

Related

From Dev

Pass array and/or object data between Polymer elements

From Dev

Data binding between two Polymer elements using polymer 1.0

From Dev

How can I pass a Polymer Object beetwen 2 custom elements

From Dev

Polymer- use behavior to share object between elements?

From Dev

Providing data to Polymer elements

From Dev

Providing data to Polymer elements

From Dev

Firebase-Polymer: Accessing a sub Object/Array from the data variable

From Dev

Json - Insert a new object between array elements

From Dev

Pass list of data (object) between activites in Andriod

From Dev

Polymer Array Adding Elements twice

From Dev

How do you pass a Jsoup Elements object between activities?

From Dev

Deserialize Binary Data of Object Array as Elements Are Available

From Dev

Message between multi-level elements (Polymer)

From Dev

How to pass object literals as polymer attributes

From Dev

Polymer/PolymerTS: Pass object to custom element

From Dev

Appending elements to dom returns [object Object] or wrong data from array

From Dev

Polymer use Array for data binding

From Dev

Polymer change data array on the fly

From Dev

Polymer change data array on the fly

From Dev

Pass object as array of object

From Dev

Pass array literal to polymer computed binding

From Dev

how to pass array to inner html in polymer

From Dev

Polymer counting elements with certain attribute inside array

From Dev

Observe of array elements in Polymer not working for boolean bindings

From Dev

Polymer loop through an array of elements to be stamped

From Dev

Polymer data binding with paper elements and local storage

From Dev

Most efficient way of "pushing" data to Polymer elements

From Dev

Most efficient way of "pushing" data to Polymer elements

From Dev

Pass an object between activities

Related Related

  1. 1

    Pass array and/or object data between Polymer elements

  2. 2

    Data binding between two Polymer elements using polymer 1.0

  3. 3

    How can I pass a Polymer Object beetwen 2 custom elements

  4. 4

    Polymer- use behavior to share object between elements?

  5. 5

    Providing data to Polymer elements

  6. 6

    Providing data to Polymer elements

  7. 7

    Firebase-Polymer: Accessing a sub Object/Array from the data variable

  8. 8

    Json - Insert a new object between array elements

  9. 9

    Pass list of data (object) between activites in Andriod

  10. 10

    Polymer Array Adding Elements twice

  11. 11

    How do you pass a Jsoup Elements object between activities?

  12. 12

    Deserialize Binary Data of Object Array as Elements Are Available

  13. 13

    Message between multi-level elements (Polymer)

  14. 14

    How to pass object literals as polymer attributes

  15. 15

    Polymer/PolymerTS: Pass object to custom element

  16. 16

    Appending elements to dom returns [object Object] or wrong data from array

  17. 17

    Polymer use Array for data binding

  18. 18

    Polymer change data array on the fly

  19. 19

    Polymer change data array on the fly

  20. 20

    Pass object as array of object

  21. 21

    Pass array literal to polymer computed binding

  22. 22

    how to pass array to inner html in polymer

  23. 23

    Polymer counting elements with certain attribute inside array

  24. 24

    Observe of array elements in Polymer not working for boolean bindings

  25. 25

    Polymer loop through an array of elements to be stamped

  26. 26

    Polymer data binding with paper elements and local storage

  27. 27

    Most efficient way of "pushing" data to Polymer elements

  28. 28

    Most efficient way of "pushing" data to Polymer elements

  29. 29

    Pass an object between activities

HotTag

Archive