Show Google Maps info window on Google scatter chart point click

Question

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.

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 m0 variable click listener.

 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 eo, Utrecht", icon: "http://maps.google.com/mapfiles/ms/icons/red.png" }); m0.addListener("click", function() { //i0.open(map, m0); drawChart0(this, "2e Daalsebuurt eo" ); }); google.charts.setOnLoadCallback(drawScatter); function drawScatter() { var data = google.visualization.arrayToDataTable([ ['Woningwaarde', 'Criminaliteit 2011', 'Criminalteit 2012'], [188400, {v:430,f: "2e Daalsebuurt eo, Utrecht"}, null], [189050, null, {v:401,f: "2e Daalsebuurt eo, 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 > 0 && 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)); } } 

 <!DOCTYPE html> <html> <head> <title>D3.js</title> </head> <body> <div id="map" style="height:400px;width:100%;"></div> <div id="scatter" style="width:100%;height:400px;"></div> <!--<script src="//d3js.org/d3.v4.min.js"></script>--> <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <script src="//maps.googleapis.com/maps/api/js?key=AIzaSyAB9kYP7clJyhX45mt6y3LobeKA9L6ivNo&callback=initMap" async defer></script> </body> </html> 

Answer 1

To trigger a click event on a marker in the Google Maps Javascript API v3 use the trigger method:

google.maps.event.trigger(m0,'click');

documentation :

trigger(instance:Object, eventName:string, var_args:...)
Return Value: None
Triggers the given event. All arguments after eventName are passed as arguments to the listeners.

updated code snippet:

 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 eo, Utrecht", icon: "http://maps.google.com/mapfiles/ms/icons/red.png" }); m0.addListener("click", function() { //i0.open(map, m0); drawChart0(this, "2e Daalsebuurt eo"); }); google.charts.setOnLoadCallback(drawScatter); function drawScatter() { var data = google.visualization.arrayToDataTable([ ['Woningwaarde', 'Criminaliteit 2011', 'Criminalteit 2012'], [188400, { v: 430, f: "2e Daalsebuurt eo, Utrecht" }, null], [189050, null, { v: 401, f: "2e Daalsebuurt eo, 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 > 0 && 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); google.maps.event.trigger(m0,'click'); m0.dispatchEvent(c); } }); chart.draw(data, google.charts.Scatter.convertOptions(options)); } } 

 <!DOCTYPE html> <html> <head> <title>D3.js</title> </head> <body> <div id="map" style="height:400px;width:100%;"></div> <div id="scatter" style="width:100%;height:400px;"></div> <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <script src="//maps.googleapis.com/maps/api/js?callback=initMap" async defer></script> </body> </html>