0
問題は次のとおりです。 散布図のポイントをクリックすると、対応する情報ウィンドウがGoogleマップに表示されます。したがって、散布図のポイントをクリックすると、マップ内のマーカーをクリックすると同じウィンドウが開きます。GoogleスキャッタチャートポイントにGoogle Mapsの情報ウィンドウを表示する
私が今行っているコードは以下の通りです。 JSの下部には、散布図からポイントをクリックした部分が登録されています。これが問題の始まりです。私は可変クリックリスナをm0トリガする方法を知らない。
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);
\t \t function drawScatter() {
\t \t \t var data = google.visualization.arrayToDataTable([
\t \t \t \t ['Woningwaarde', 'Criminaliteit 2011', 'Criminalteit 2012'],
\t \t \t \t \t [188400, {v:430,f: "2e Daalsebuurt e.o., Utrecht"}, null],
\t \t \t \t \t \t \t [189050, null, {v:401,f: "2e Daalsebuurt e.o., Utrecht"}]]);
\t \t \t
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));
\t \t \t \t }
\t \t }<!DOCTYPE html>
<html>
\t <head>
\t \t <title>D3.js</title>
\t </head>
\t <body>
\t \t <div id="map" style="height:400px;width:100%;"></div>
\t \t <div id="scatter" style="width:100%;height:400px;"></div>
\t \t <!--<script src="//d3js.org/d3.v4.min.js"></script>-->
\t \t <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
\t \t <script src="//maps.googleapis.com/maps/api/js?key=AIzaSyAB9kYP7clJyhX45mt6y3LobeKA9L6ivNo&callback=initMap" async defer></script>
</body>
</html>