title: Making Clickable Markers on Google Maps/D3.JS
body: <p>I working to plot different points on map using D3.JS and Google Map.
  I'd like to extend this example and work on clickable point, one we click on the point, we get text that I will add later. 
  In this case, should I edit code related to Google Map or with D3.JS.</p>
  
  <p><a href="http://jsfiddle.net/yee379/uF9PV/" rel="nofollow">http://jsfiddle.net/yee379/uF9PV/</a></p>
  
  <p>My initiatial though is to make an object using google maps marker. </p>
  
  <pre><code>var marker = new google.maps.Marker({
      position: myLatLng,
      map: map,
      icon: image
  }); 
  google.maps.event.addListener(marker, 'click', function() {
     map.setZoom(8);
     map.setCenter(marker.getPosition());
  });
  </code></pre>
  
  <p><strong>UPDATE !</strong>
  I am making change here: </p>
  
  <pre><code>    marker.append("svg:text")
              .attr("x", padding + 7)
              .attr("y", padding)
              .attr("dy", ".31em")
              .on("mouseout", function expandNode() {alert("ff")})
              .on("click", addEvent())
  
              .text( function(d) { 
                return d.name; }
              );
  
  
  function addEvent(element, evnt, funct){
    if (element.attachEvent)
     return element.attachEvent('on'+evnt, funct);
    else
     return element.addEventListener(evnt, funct, false);
  }
  
  // example
  addEvent(
      document.getElementById('myElement'),
      'click',
      function () { alert('hi!'); }
  );
  </code></pre>
  
  <p>But I am not getting results ?</p>