google geocharts сделать регионы clickable

Я сделал этот geochart из google для своего сайта, но я хочу, чтобы регионы были доступны для просмотра. Поэтому, когда я нажимаю на нее, чтобы показать мне информацию, я хочу добавить об этом регионе. Я хочу создать текст вывода.google geocharts сделать регионы clickable

Другое дело: я хочу отображать только карту страны без стран, поэтому я хочу, чтобы форма карты была как страна (в данном случае Македония), а не как прямоугольник. Ниже приведен код JS:

<html> 
     <head> 
    <script type='text/javascript' src='https://www.google.com/jsapi'></script> 
    <script type='text/javascript'> 
    google.load('visualization', '1', {'packages': ['geochart']}); 
    google.setOnLoadCallback(drawVisualization); 

    function drawVisualization() {var data = new google.visualization.DataTable(); 

    data.addColumn('string', 'city'); 
    data.addColumn('number', 'Value'); 
    data.addColumn({type:'string', role:'tooltip'});var ivalue = new Array(); var name = new Array(); 

    data.addRows([[{v:'MK-76',f:'Tetovë'},0,'Kipper Market']]); 
    ivalue['MK-TE'] = 'Obama (D) will <span style="color:#444; font-weight:bold;">win</span> in Alaska.'; 


    data.addRows([[{v:'MK-19',f:'Gostivar'},0,'Kipper Market']]); 
    ivalue['MK-GV'] = 'Obama (D) will <span style="color:#444; font-weight:bold;">win</span> in Alaska.'; 

    data.addRows([[{v:'MK-40',f:'Kërçovë'},0,'Kipper Market']]); 
    ivalue['MK-KI'] = 'Obama (D) will <span style="color:#444; font-weight:bold;">win</span> in Alaska.'; 





    var options = { 
    backgroundColor: {fill:'#FFFFFF',stroke:'#FFFFFF' ,strokeWidth:0 }, 
    colorAxis: {minValue: 0, maxValue: 49, colors: ['#ec2227','#438094','#438094','#438094','#438094','#438094','#438094','#438094','#438094','#438094','#438094','#438094','#438094','#438094','#438094','#438094','#438094','#438094','#438094','#438094','#438094','#438094','#438094','#438094','#438094','#438094','#DE3403','#DE3403','#DE3403','#DE3403','#DE3403','#DE3403','#DE3403','#DE3403','#DE3403','#DE3403','#DE3403','#DE3403','#DE3403','#DE3403','#DE3403','#DE3403','#E0D39E','#E0D39E','#E0D39E','#E0D39E','#E0D39E','#E0D39E','#E0D39E','#E0D39E',]}, 
    legend: 'none', 
    backgroundColor: {fill:'none',stroke:'none' ,strokeWidth:0 }, 
    datalessRegionColor: '#f5f5f5', 
    displayMode: 'regions', 
    enableRegionInteractivity: 'true', 
    resolution: 'provinces', 
    sizeAxis: {minValue: 1, maxValue:1,minSize:10, maxSize: 10}, 
    region:'MK', 
    keepAspectRatio: true, 
    width:100 + "%", 
    height:100 + '%', 
    tooltip: {textStyle: {color: '#444444'}, trigger:'focus'} 
    }; 
     var chart = new google.visualization.GeoChart(document.getElementById('visualization')); 
     google.visualization.events.addListener(chart, 'select', function() { 
     var selection = chart.getSelection(); 
     if (selection.length == 1) { 
     var selectedRow = selection[0].row; 
     var selectedRegion = data.getValue(selectedRow, 0); 
     if(ivalue[selectedRegion] != '') {document.getElementById('message').innerHTML = ivalue[selectedRegion];} 
     if(name[selectedRegion] != '') {document.getElementById('name').innerHTML = name[selectedRegion];} 
     } 
     }); 
     chart.draw(data, options); 



     go(); 

     window.addEventListener('resize', go); 

     function go(){ 
     chart.draw(data, options); 
     } 
     } 

     </script> 
     </head> 
     <body> 
     <div id="container"> 
     <div id="visualization"></div> 
     <div id="message"></div> 
    </div> 

     </body> 
    </html>

источник

2015-05-05 Ilir Bajrami

Вы можете попробовать это

google.visualization.events.addListener(chart, 'select', function() { 
    var selectedItem = chart.getSelection()[0]; 
    if (selectedItem) { 
     var country = data.getValue(selectedItem.row, 0); 
     alert (country); 

     if(ivalue[country] != '') {document.getElementById('message').innerHTML = ivalue[country];} 
     if(name[country] != '') {document.getElementById('name').innerHTML = name[country];} 
    }  
    });

источник

2015-05-05 17:40:00 Verma

это очень интересное решение. Я хотел проголосовать за ур ответа, но мне нужно 15 репутации для этого ... но ... мне нужна информация, которая будет отображаться под картой, как обычный текст (что будет хорошо, если вы покажете мне, как ее стилизовать. некоторые из текста будут выделены жирным шрифтом, а некоторые - только как параграф). также о том, как избавиться от стран. как я могу отредактировать этот svg, чтобы удалить путь из стран? я могу видеть это, когда в контрольном элементе на хроме, но я не знаю, где его редактировать. –

для изменения текста, http://www.tizag.com/javascriptT/javascript-innerHTML.php – Verma

google geocharts сделать регионы clickable

ответ

Смежные вопросы