title: Where is the correct place to add an eventListener to a google-map element in Polymer?
body: <p>I have the following element defined:</p>
  
  <p></p>
  
  <pre><code>&lt;dom-module id="my-element"&gt;
  
    &lt;style&gt;
      :host {
        display: block;
      }
      google-map {
        height: 600px;
      }
    &lt;/style&gt;
  
    &lt;template&gt;
      &lt;geo-location highAccuracy watchpos latitude="{{lat}}" longitude="{{lng}}"&gt;&lt;/geo-location&gt;
      &lt;google-map id="myMap" latitude="{{lat}}" longitude="{{lng}}" dragEvents="true" zoom="16"&gt;&lt;/google-map&gt;
      &lt;br&gt;
      &lt;small&gt;Latitude: &lt;b&gt;{{lat}}&lt;/b&gt;&lt;/small&gt;&lt;br&gt;
      &lt;small&gt;Longitude: &lt;b&gt;{{lng}}&lt;/b&gt;&lt;/small&gt;&lt;br&gt;
    &lt;/template&gt;
  
    &lt;script&gt;
      (function() {
        Polymer({
          is: 'my-element',
          ready: function() {
            this.$.myMap.addEventListener('google-map-dragend', function(e) {
              alert('Map has moved.');
            });
          }
        });
      })();
    &lt;/script&gt;
  
  &lt;/dom-module&gt;
  </code></pre>
  
  <p>However, the event listener does not work at all. I've tried calling it in various places but with no success. I'd like to have the event listener call a function every time the user drags the map.</p>
  
  <p>I'm using Polymer 1.0 with <a href="http://ebidel.github.io/geo-location/components/geo-location/" rel="nofollow">Eric Bidelman's excellent geo-locate component</a>. Here is the <a href="https://elements.polymer-project.org/elements/google-map/" rel="nofollow">Documentation for google-map component</a>.</p>