CODEWITHSUNDEEP
javascriptgoogle-mapspolymerweb-component
Tuizi
Tuizi

Reputation: 1673

Binding between two webcomponents: Google map + geo-localisation

I'm trying to use the webcomponent google-map with the component geo-location like the third example on: http://ebidel.github.io/geo-location/components/geo-location/

HTML:

<geo-location latitude="{{lat}}" longitude="{{lng}}"></geo-location>
<google-map latitude="{{lat}}" longitude="{{lng}}" showcentermarker></google-map>

But my problem is, the {{lat}} and {{lng}} value are never updated for the google-map component in runtime.

RUNTIME:

<google-map fit="" showcentermarker="" latitude="{{lat}}" longitude="{{lng}}"></google-map>
<geo-location latitude="13" longitude="-73.57572912" watchpos=""></geo-location>

Upvotes: 0

Views: 156

Answers (1)

Dirk Grappendorf
Dirk Grappendorf

Reputation: 3422

I suspect that you are using the elements like this:

<body>
  <geo-location ...></geo-location>
  <google-map ...></google-map>
</body>

But declarative data bindings only work inside Polymer elements or if you surround them with template is="auto-binding":

<body>
  <template is="auto-binding">
    <geo-location ...></geo-location>
    <google-map ...></google-map>
  </template>
</body>

See the "Using the auto-binding template element" chapter in the documentation for more information on this.

Upvotes: 2

Related Questions