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>