Adding addDomListener event to Google Map from Page Element

Question

How can I add addDomListener event to Google Map from outside of Map elements? For example I have a List as:

<ul>
   <li class="pointA">Ponit A</li>
   <li class="pointB">Ponit B</li>
   <li class="pointC">Ponit C</li>
</ul>

I tried to add 3 new latlang points as:

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);

and finally did this:

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);});

But this is not centering the map in requires points. Why is this not working?

Update

I also tried this:

 var controlUI1 = $('.pointA');
     google.maps.event.addDomListener(controlUI1, 'click', function() {
     map.setCenter(latlngPointA);
 });

This is still not working.

Answer 1

The addDomListener expects a DOM element, not a string containing the name of a CSS class .

<ul>
   <li id="pointA">Ponit A</li>
   <li id="pointB">Ponit B</li>
   <li id="pointC">Ponit C</li>
</ul>

google.maps.event.addDomListener(document.getElementById('pointA'), 'click', function() {
  map.setCenter(latlngPointA);});
google.maps.event.addDomListener(document.getElementById('pointB'), 'click', function() {
  map.setCenter(latlngPointB);});
google.maps.event.addDomListener(document.getElementById('pointC'), 'click', function() {
  map.setCenter(latlngPointC);});