I am using the latest App Toolbox and app shell structure for my polymer 1.0 project and I am having issues with a dom-repeat
template in a custom element, the google-map-markers
are not showing up inside the dom-repeat
template.
Here is the code:
<dom-module ="sample-map">
<style>
:host {
display: block;
padding: 10px;
}
#mapWrapper{
height: 600px;
display:block;
width: auto;
}
</style>
<template>
<google-map api-key="MY_API_KEY" fit-to-markers>
<template is="dom-repeat" items="{{locations}}">
<google-map-marker latitude="{{item.latitude}}" longitude="{{item.longitude}}"></google-map-marker>
</template>
</google-map>
</template>
<script>
Polymer({
is: 'sample-map',
properties:{
locations:{
type: Array,
notify: true,
value: function(){
return [];
}
}
},
addLocation: function(location){
this.push('locations', location);
},
getLocations: function(){
//.. performs request to get locations from a server
MyLibrary.get('http://api.testurl.com/locations', function(response){
for(var item in response){
var location = response[item];
this.addLocation(location);
}
}.bind(this));
}
});
</script>
</dom-module>
This is pretty much it. I have verified the locations Array is being added to, but after the locations are populated there is no drawing of the google-map-marker
s.
If i statically set the array, the google-map-marker
s show up. I have done this exact same thing before without the App shell structure and it works, however before I was not binding the function using .bind(this)
.
1) Does the .bind(this)
limit my scope for the Array and not actually update the locations Array property?
2) How do I update the google-map
after my array changes using the array mutations in polymer?
Thanks