jsbin.qodici.html

<script src="http://www.polymer-project.org/platform.js"></script>

<link rel="import" href="http://www.polymer-project.org/components/polymer-jsonp/polymer-jsonp.html">
<link rel="import" href="http://www.polymer-project.org/components/google-map/google-map.html">

<polymer-element name="google-map-with-markers" extends="google-map" attributes="markers">
  <template>
    <style>
      :host {
        position: relative;
      }
      #map {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
      }
    </style>
    <shadow></shadow>
  </template>
  <script>
    Polymer('google-map-with-markers', {
      ready: function() {
        this.markers = [];
        this.super();  
      },
      markersChanged: function() {
        this.markers.forEach(function(m) {
          var marker = new google.maps.Marker({
            map: this.map,
            position: new google.maps.LatLng(m.lat, m.lng),
            title: m.name
          });
        }.bind(this));
      }
    });
  </script>
</polymer-element>

<polymer-element name="locator-map">
  <template>
    <style>
      :host { display: block; }
      google-map-with-markers {
        display: block;
        height: 600px;
      }
    </style>
    <!-- Source: https://docs.google.com/spreadsheet/ccc?key=0AqZBbhllhMtHdFhFYnRlZk1zMzVZZU5WRnpLbzFYVFE&usp=sharing
    -->
    <polymer-jsonp auto id="jsonp" url="https://spreadsheets.google.com/feeds/list/0Ao_YrKZEsc4AdGppeG1zaGotRDd0LUdIYk9tdW9VZnc/od6/public/values?alt=json-in-script&callback=" response="{{response}}"></polymer-jsonp>

    <ul hidden>
      <template repeat="{{entry in response.feed.entry}}">
        <li>Name: {{entry.gsx$name.$t}}
          <ul>
            <li>Lat: {{entry.gsx$lat.$t}}</li>
            <li>Lng: {{entry.gsx$lng.$t}}</li>
          </ul>
        </li>
      </template>
    </ul>
    
    <google-map-with-markers latitude="45.526158" longitude="-122.679394" zoom="14" markers="{{markers}}"></google-map-with-markers>
    
  </template>
  <script>
    Polymer('locator-map', {
      created: function() {
        this.markers = [];
        this.response = {};
      },
      responseChanged: function() {
        var entries = this.response.feed.entry;
        for (var i = 0, entry; entry = entries[i]; ++i) {
          this.markers.push({
            lat: parseFloat(entry.gsx$lat.$t),
            lng: parseFloat(entry.gsx$lng.$t),
            name: entry.gsx$name.$t
          });
        }
      }
    });
  </script>
</polymer-element>

<locator-map></locator-map>