2
ジオチャートを使用して、世界中の利用可能な店舗を私のウェブサイトに表示しています。利用可能な店舗のデータを追加し、 divを地図上のある地域をクリックするたびに表示します。私はロシアのようなマップ上の領域をクリックすると、利用可能店舗/ストアのアドレスのデータは、地図のほか、「地域情報」のdivにGoogle Geochartsの国に2〜3行のデータを追加する方法
<!DOCTYPE html>
<html>
<head>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAJ142umlpMPn6tahte2VZwwNUfHkVZXcs">
</script>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script type="text/javascript">
google.charts.load('current', {'packages':['geochart']});
google.charts.setOnLoadCallback(drawMap);
<!-- google.load('visualization', '1', { packages: ['geochart'],callback: drawMap }); -->
function drawMap() {
var data = google.visualization.arrayToDataTable([
['Country'],
['Austria'],
['Belgium'],
['Bulgaria'],
['China'],
['Croatia'],
['Czech Republic'],
['France'],
['Germany'],
['Greek'],
['Hungary'],
['India'],
['Italy'],
['Japan'],
['Kazakhstan'],
['Luxembourg'],
['Moldova'],
['Netherlands'],
['Pakistan'],
['Poland'],
['Portugal'],
['Romania'],
['Russia'],
['Serbia'],
['Slovakia'],
['Spain'],
['Sweden'],
['Switzerland'],
['Turkey'],
['Ukraine']
]);
var options = {
backgroundColor: '#81d4fa',
defaultColor: '#FCC51D',
dataMode: 'regions',
<!-- region:'IN' -->
};
var container = document.getElementById('regions_div');
var chart = new google.visualization.GeoChart(container);
function myClickHandler() {
var selection = chart.getSelection();
document.getElementById('region-info').style.visibility="visible";
<!-- var message = ''; -->
for (var i = 0; i < selection.length; i++) {
var item = selection[i];
if (item.row != null && item.column != null) {
//message += '{row:' + item.row + ',column:' + item.column + '}';
document.getElementById('region-info').innerHTML = "This is the region where we put store-info";
} else if (item.row != null) {
<!-- message += '{row:' + item.row + '}'; -->
document.getElementById('region-info').innerHTML = "This is the region where we put store-info";
} else if (item.column != null) {
<!-- message += '{column:' + item.column + '}'; -->
document.getElementById('region-info').innerHTML = "This is the region where we put store-info";
}
google.visualization.events.addListener(chart, 'select', myClickHandler);
$("#zoomin").click(function() {
var zoom = $("#map-area").css("zoom",1.4);
});
$("#zoomout").click(function() {
var zoom = $("#map-area").css("zoom",1);
});
chart.draw(data, options);
}
</script>
<style>
.jvectormap-zoomin,.jvectormap-zoomout{
border: 1px solid #c8d9e5;
color: #565a5b;
font-family: 'DINWebPro-Medium W01 Regular',"Helvetica Neue",Helvetica,Arial,sans-serif;
font-size: 42px;
text-align: center;
cursor: pointer;
width: 55px;
position: absolute;
opacity: 0.5;
left: 17px;
background: white;
height: 44px;
}
.jvectormap-zoomin{
bottom: 55px;
}
.jvectormap-zoomout{
bottom: 5px;
}
.geocharts-container{
height:100%;
width:100%;
position:relative;
overflow:hidden;
border: 1px solid #000;
}
</style>
</head>
<body>
<div class="geocharts-container">
<div id="map-area" style="width: 80%; height: 600px;float:left;"><div id="regions_div"></div></div>
<div id="zoomin" class="jvectormap-zoomin">+</div>
<div id="zoomout" class="jvectormap-zoomout">-</div>
<div id="region-info" style="float:right;width:20%;height:600px;visibility:hidden;">Text area</div>
</div>
</body>
</html>
を示すべきである：以下は私のコードです。