Где находится правильное место для добавления eventListener к элементу google-map в Polymer?

Question

Я определил следующий элемент:

<dom-module id="my-element">

  <style>
    :host {
      display: block;
    }
    google-map {
      height: 600px;
    }
  </style>

  <template>
    <geo-location highAccuracy watchpos latitude="{{lat}}" longitude="{{lng}}"></geo-location>
    <google-map id="myMap" latitude="{{lat}}" longitude="{{lng}}" dragEvents="true" zoom="16"></google-map>
    <br>
    <small>Latitude: <b>{{lat}}</b></small><br>
    <small>Longitude: <b>{{lng}}</b></small><br>
  </template>

  <script>
    (function() {
      Polymer({
        is: 'my-element',
        ready: function() {
          this.$.myMap.addEventListener('google-map-dragend', function(e) {
            alert('Map has moved.');
          });
        }
      });
    })();
  </script>

</dom-module>

Однако прослушиватель событий не работает вообще. Я пытался назвать это в разных местах, но безуспешно. Я бы хотел, чтобы слушатель событий вызывал функцию каждый раз, когда пользователь перетаскивает карту.

Я использую Polymer 1.0 с отличным гео-локационным компонентом Эрика Бидельмана. Вот документация для компонента google-map.

Answer 1

Оказывается, что слушатель события находится в правильном месте, как ready Атрибут срабатывает только после завершения загрузки всех компонентов на странице.

Ошибка, которую я сделал, на самом деле была условной проблемой, поскольку атрибуты в документации Polymer переводятся в код с помощью '-'es для разделения слов. Я помню, как читал где-то в документации, что атрибуты должны быть разделены тире в HTML:

dragEvents="true" должно быть drag-events="true"

Теперь все отлично работает.