Google マップのいくつかの場所に円グラフを描画しようとしました。for ループを使用して複数の場所に円グラフを描画するコードを思いつきました。円グラフの詳細を含むウィンドウを表示するには、すべての円グラフにクリック イベントを追加する必要があります。しかし、クリックイベントはうまく機能していません。この問題の解決策を教えてください。以下は私が試したコードです。
<html>
<head>
<link href="http://code.google.com//apis/maps/documentation/javascript/examples/default.css" rel="stylesheet" type="text/css">
<script src="http://code.jquery.com/jquery-1.7.2.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?v=3.10&sensor=false&.js"></script>
<script type="text/javascript" src="https://www.google.com/jsapi?.js"></script>
<script type="text/javascript">
google.load( 'visualization', '1', { packages:['corechart'] });
ChartMarker.prototype = new google.maps.OverlayView;
ChartMarker.prototype.onAdd = function() {
$( this.getPanes().overlayMouseTarget ).append( this.$div );
};
ChartMarker.prototype.onRemove = function() {
this.$div.remove();
};
ChartMarker.prototype.draw = function() {
var marker = this;
var projection = this.getProjection();
var position = projection.fromLatLngToDivPixel( this.get('position') );
this.$div.css({
left: position.x,
top: position.y,
display: 'block'
})
this.$inner
.html( '<img src="' + this.get('image') + '"/>' )
.click( function( event ) {
var events = marker.get('events');
events && events.click( event );
});
this.chart = new google.visualization.PieChart( this.$inner[0] );
this.chart.draw( this.get('chartData'), this.get('chartOptions') );
};
function drawChart(marker, data, event, location) {
var options = {'title':'Event : '+event+' Location : '+location,
'width':400,
'height':150,
slices: {0: {color: 'orange'}, 1:{color: 'green'}, 2:{color: 'yellow'}, 3: {color: 'blue'}, 4:{color: 'red'}}};
var node = document.createElement('div'),
infoWindow = new google.maps.InfoWindow(),
chart = new google.visualization.PieChart(node);
chart.draw(data, options);
infoWindow.setContent(node);
infoWindow.open(marker.getMap(),marker);
}
function ChartMarker( options ) {
this.setValues( options );
this.$inner = $('<div>').css({
position: 'relative',
left: '-50%', top: '-50%',
width: options.width,
height: options.height,
fontSize: '1px',
lineHeight: '1px',
padding: '2px',
backgroundColor: 'transparent',
cursor: 'default'
});
this.$div = $('<div>')
.append( this.$inner )
.css({
position: 'absolute',
display: 'none'
});
};
function drawPieCharts(map,latlang){
var data = google.visualization.arrayToDataTable([
[ 'Task', 'Hours per Day' ],
[ 'Work', 11 ],
[ 'Eat', 2 ],
[ 'Commute', 2 ],
[ 'Watch TV', 2 ],
[ 'Sleep', 7 ]
]);
var options = {
fontSize: 8,
backgroundColor: 'transparent',
legend: {position: 'none'}
};
var marker = new ChartMarker({
map: map,
position: latlang,
width: '250px',
height: '100px',
chartData: data,
chartOptions: options,
events: {
click: function( event ) {
drawChart(marker,data)
}
}
});
}
function initialize() {
var latLng = new google.maps.LatLng(-33.890542, 151.274856)
var markers = [
[ -33.890542, 151.274856, 50,40,21,40],
[-33.923036, 151.259052, 67,89,23,67],
[-34.028249, 151.157507, 45,67,23,90],
[-33.80010128657071, 151.28747820854187,456,234,789,90],
[-33.950198, 151.259302,456,34,90,23]
];
var mapOptions = {
center: latLng,
zoom: 12,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"),
mapOptions);
for(var k=0;k<markers.length;k++){
var location = new google.maps.LatLng(markers[k][0],markers[k][1])
var data = google.visualization.arrayToDataTable([
[ 'Task', 'Hours per Day' ],
[ 'Work', markers[k][2] ],
[ 'Eat', markers[k][3] ],
[ 'Commute',markers[k][4] ],
[ 'Watch TV', markers[k][5] ],
[ 'Sleep', markers[k][6] ]
]);
var options = {
fontSize: 8,
backgroundColor: 'transparent',
legend: {position: 'none'}
};
var marker = new ChartMarker({
map: map,
position: location,
width: '250px',
height: '100px',
chartData: data,
chartOptions: options,
events: {
click: function( event ) {
drawChart(marker,data)
}
}
});
}
};
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body >
<div id="map_canvas" style="width: 900px; height: 500px;"></div>
</body>
</html>