title: Adding addDomListener event to Google Map from Page Element
body: <p>Can some one please let me know how I can add addDomListener event to Google Map from outside of Map elements?
  For example I have a List as</p>
  
  <pre><code>&lt;ul&gt;
     &lt;li class="pointA"&gt;Ponit A&lt;/li&gt;
     &lt;li class="pointB"&gt;Ponit B&lt;/li&gt;
     &lt;li class="pointC"&gt;Ponit C&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>I tried to add 3 new latlang points as:</p>
  
  <pre><code>var latlngPointA = new google.maps.LatLng(11.818965,123.727169);
  var latlngPointB = new google.maps.LatLng(11.768488,123.444444);
  var latlngPointC = new google.maps.LatLng(11.890000,123.123456);
  </code></pre>
  
  <p>and finally did this:</p>
  
  <pre><code>google.maps.event.addDomListener('.pointA', 'click', function() {
  map.setCenter(latlngPointA);});
  google.maps.event.addDomListener('.pointB', 'click', function() {
  map.setCenter(latlngPointB);});
  google.maps.event.addDomListener('.pointC', 'click', function() {
  map.setCenter(latlngPointC);});
  </code></pre>
  
  <p>But this is not centering the map in requires points. Can you please let me know why this is not working?</p>
  
  <p><strong>UPDATE</strong>
  I also tried this:</p>
  
  <pre><code> var controlUI1 = $('.pointA');
       google.maps.event.addDomListener(controlUI1, 'click', function() {
       map.setCenter(latlngPointA);
   });
  </code></pre>
  
  <p>Still not working!</p>