title: Show Google Maps info window on Google scatter chart point click
body: <p>The problem I have is the following:
  When a user clicks on a point in a scatter chart I would like to display the corresponding info window in Google maps. So when clicking a point in the scatter chart the same window opens when clicking the marker in the map.</p>
  
  <p>The code I have right now is below. At the bottom of the JS is the part where a click on a point from the scatter chart is registered. This is where the problem starts. I don't know how to trigger the <code>m0</code> variable click listener.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var map;
  google.charts.load('current', {'packages':['bar', 'scatter']});
  //google.charts.setOnLoadCallback(drawScatter);
  function isEven(n) {
    return n % 2 == 0;
  }
  
  function isOdd(n) {
    return Math.abs(n % 2) == 1;
  }
  
  
  function initMap() {
    map = new google.maps.Map(document.getElementById('map'), {
        center: {lat: 52.0918, lng: 5.1146},
          zoom: 10
      });
  
  
        // Draw bar diagram
        function drawChart0(marker, name) {
          var parent = document.createElement("div"),
            title = document.createElement("h1"),
            t = document.createTextNode(name),
            w = document.createElement("div"),
            wChart = new google.charts.Bar(w),
            o = document.createElement("div"),
            oChart = new google.charts.Bar(o),
            c = document.createElement("div"),
            cChart = new google.charts.Bar(c),
            i = document.createElement("div"),
            iChart = new google.charts.Bar(i),
            pi = document.createElement("div"),
            piChart = new google.charts.Bar(pi),
            a = document.createElement("div"),
            aChart = new google.charts.Bar(a),
            bi = document.createElement("div"),
            biChart = new google.charts.Bar(bi),
            dw = document.createElement("div"),
            dwChart = new google.charts.Bar(dw),
            infoWindow  = new google.maps.InfoWindow();
  
      var wData = google.visualization.arrayToDataTable([
        ["Jaar", "Waarde huis"],
        ["2011", 188400],
        ["2012", 189050]
      ]);
  
      var wOptions = {
        colors: ["#F44336", "#F44336"]
      }
  
      var oData = google.visualization.arrayToDataTable([
        ["Jaar", "Oppervlakte waarde"],
        ["2011", 3200],
        ["2012", 3220]
      ]);
  
      var oOptions = {
        colors: ["#F44336", "#F44336"]
      }
  
      var cData = google.visualization.arrayToDataTable([
        ["Jaar", "Criminaliteit"],
        ["2011", 430],
        ["2012", 401]
      ]);
  
      var cOptions = {
        colors: ["#F44336", "#F44336"]
      }
  
      var iData = google.visualization.arrayToDataTable([
        ["Jaar", "Inbraak"],
        ["2011", 46],
        ["2012", 37]
      ]);
  
      var iOptions = {
        colors: ["#F44336", "#F44336"]
      }
  
      var piData = google.visualization.arrayToDataTable([
        ["Jaar", "Poging inbraak"],
        ["2011", 12],
        ["2012", 9]
      ]);
  
      var piOptions = {
        colors: ["#F44336", "#F44336"]
      }
  
      var aData = google.visualization.arrayToDataTable([
        ["Jaar", "Autokraak"],
        ["2011", 131],
        ["2012", 91]
      ]);
  
      var aOptions = {
        colors: ["#F44336", "#F44336"]
      }
  
      var biData = google.visualization.arrayToDataTable([
        ["Jaar", "Bedrijfsinbraak"],
        ["2011", 9],
        ["2012", 17]
      ]);
  
      var biOptions = {
        colors: ["#F44336", "#F44336"]
      }
  
      var dwData = google.visualization.arrayToDataTable([
        ["Jaar", "Winkeldiefstal"],
        ["2011", 18],
        ["2012", 14]
      ]);
  
      var dwOptions = {
        colors: ["#4CAF50", "#4CAF50"]
      }
  
      parent.appendChild(title.appendChild(t));
      parent.appendChild(w);
      parent.appendChild(o);
      parent.appendChild(c);
      parent.appendChild(i);
      parent.appendChild(pi);
      parent.appendChild(a);
      parent.appendChild(bi);
      parent.appendChild(dw);
  
      wChart.draw(wData, wOptions);
      oChart.draw(oData, oOptions);
      cChart.draw(cData, cOptions);
      iChart.draw(iData, iOptions);
      piChart.draw(piData, piOptions);
      aChart.draw(aData, aOptions);
      biChart.draw(biData, biOptions);
      dwChart.draw(dwData, dwOptions);
  
        infoWindow.setContent(parent);
        infoWindow.open(map, marker);
    }
  
        var m0 = new google.maps.Marker({
      map: map,
      position: {lat: 52.1010322, lng:5.0999601},
      title: "2e Daalsebuurt e.o., Utrecht",
      icon: "http://maps.google.com/mapfiles/ms/icons/red.png"
    });
  
    m0.addListener("click", function() {
      //i0.open(map, m0);
      drawChart0(this, "2e Daalsebuurt e.o." );
    });
    
    google.charts.setOnLoadCallback(drawScatter);
            function drawScatter() {
             var data = google.visualization.arrayToDataTable([
              ['Woningwaarde', 'Criminaliteit 2011', 'Criminalteit 2012'],
               [188400, {v:430,f: "2e Daalsebuurt e.o., Utrecht"}, null],
                 [189050, null, {v:401,f: "2e Daalsebuurt e.o., Utrecht"}]]);
  
             
          var options = {
            hAxis: {title: 'Woningwaarde'},
            vAxis: {title: 'Criminaliteit'}
          }
  
      var chart = new google.charts.Scatter(document.getElementById('scatter'));
      google.visualization.events.addListener(chart, 'select', function() {
      var row = chart.getSelection()[0].row;
      console.log(row);
  
      if( row &gt; 0 &amp;&amp; isOdd(row) ) {
        row = row - 1;
      }
      console.log(row);
  
      if( row == 0) {
        var c = document.createEvent("MouseEvents");
        c.initMouseEvent("click",true,true,window,0,0,0,0,0,false,false,false,false,0,null);
        m0.dispatchEvent(c);
      }
  });
  chart.draw(data, google.charts.Scatter.convertOptions(options));
      }
          }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
   &lt;head&gt;
    &lt;title&gt;D3.js&lt;/title&gt;
   &lt;/head&gt;
  
   &lt;body&gt;
    &lt;div id="map" style="height:400px;width:100%;"&gt;&lt;/div&gt;
    &lt;div id="scatter" style="width:100%;height:400px;"&gt;&lt;/div&gt;
  
    &lt;!--&lt;script src="//d3js.org/d3.v4.min.js"&gt;&lt;/script&gt;--&gt;
    &lt;script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"&gt;&lt;/script&gt;
    &lt;script src="//maps.googleapis.com/maps/api/js?key=AIzaSyAB9kYP7clJyhX45mt6y3LobeKA9L6ivNo&amp;callback=initMap" async defer&gt;&lt;/script&gt;
       &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>