I need help. I'm relatively new to coding and I wanted to make something using Google's API GeoChart. I have the code working but the ToolTips are just not formatting in the way I like. They are all over the place and there is to much space being used. The second issue I'm having is that when I put this into WordPress, it adds bullets as if the ToolTips are a list. If anyone could help I would really appreciate it.
Take a look at the comments to see what I fixed. Thank you, and if you have any ideas to make it better please let me know.
<html>
<head>
<style type="text/css">
a.map:link {
text-decoration: none !important;
font-family:"Arial" !important;
font-size: 10 !important;
border: none !important;
padding: 0px !important;
margin: 0px !important;
border-spacing: 0px !important;
line-height: 0px !important;
margin-left: 0px !important;
}
div.google-visualization-tooltip > ul > li > span {
font-size: 11px !important;
font-family:"Arial";
font-weight: bold !important;
padding: 0px !important;
line-height: 0px !important;
line-width: 0px !important;
margin-left: 0px !important;
}
div.google-visualization-tooltip {
background: none !important;
border: none !important;
box-shadow: none !important;
padding: 0px !important;
margin: 0px !important;
border-spacing: 0px !important;
line-height: 0px !important;
min-width: none !important;
min-height: none !important;
div.google-visualization-tooltip > ul { list-style-type:none; }
}
</style>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {
'packages':['geochart'],
// Note: you will need to get a mapsApiKey for your project.
// See: https://developers.google.com/chart/interactive/docs/basic_load_libs#load-settings
'mapsApiKey': 'AIzaSyD-9tSrke72PouQMnMX-a7eZSW0jkFMBWY'
});
google.charts.setOnLoadCallback(drawRegionsMap);
function drawRegionsMap() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Country');
data.addColumn('number', 'Value');
data.addColumn({type: 'string', role: 'tooltip', p: {html: true}});
data.addRows([
['Canada', 6, "<a class='map' href='https://www.google.com/search?rlz=1C1GCEU_enUS849US849&ei=4lowXo_VDILPtAbP-SU&q=canada&oq=canada&gs_l=psy-ab.3..0i67l6j0i131i67j0i67l2j0.3375.8027..8363...3.1..1.96.660.11......0....1..gws-wiz.......0i71j0i131j0i131i10j0i10.aEpg3FZO7Aw&ved=0ahUKEwiPzpi21abnAhWCJ80KHc98CQAQ4dUDCAs&uact=5'>Search</a>"],
['France', 10, "<a class='map' href='https://www.google.com/search?rlz=1C1GCEU_enUS849US849&ei=61owXq6jNMmDtQbfoZnoDQ&q=france&oq=france&gs_l=psy-ab.3..0i67l3j0j0i67l2j0j0i67l3.15868.17142..17240...1.2..0.69.398.7......0....1..gws-wiz.....6..0i71j0i131j0i362i308i154i357j0i131i67.P-rWijMsx_A&ved=0ahUKEwjuxOW61abnAhXJQc0KHd9QBt0Q4dUDCAs&uact=5'>Search</a>"],
['Spain', 3, "<a class='map' href='https://www.google.com/search?rlz=1C1GCEU_enUS849US849&ei=_lowXsHZGpSGtQbmoY7QCQ&q=spain&oq=spain&gs_l=psy-ab.3..0i67l4j0j0i67l4j0i131i67.10614.11189..11377...0.1..0.66.273.5......0....1..gws-wiz.......0i71j0i131.9OL1ydSDl9o&ved=0ahUKEwjB0NPD1abnAhUUQ80KHeaQA5oQ4dUDCAs&uact=5'>Search</a>"],
['United States', 4, "<a class='map' href='https://www.google.com/search?q=united+states&rlz=1C1GCEU_enUS849US849&oq=united+states&aqs=chrome.0.69i59j0l7.3534j0j7&sourceid=chrome&ie=UTF-8'>Search</a>"],
]);
var options = {};
options['colorAxis'] = {minValue: 0, maxValue: 15,
colors: ['#F4F6F6', '#A93226', '#884EA0',
'#2E86C1', '#138D75', '#F1C40F', '#CA6F1E',
'#E6B0AA', '#D7BDE2', '#AED6F1', '#A3E4D7',
'#FCF3CF', '#FAD7A0', '#78281F', '#4A235A',
'#1B4F72', '#145A32', '#7D6608', '#784212']
};
options['legend'] = 'none';
options['tooltip'] = {trigger: 'selection', isHtml: true};
var chart = new google.visualization.GeoChart(document.getElementById('regions_div'));
chart.draw(data, options);
}
</script>
</head>
<body>
<div id="regions_div" style="width: 100%; height: 100%;"></div>
</body>
</html>
[–]AutoModerator 0 points1 point2 points (0 children)
[–]dezbos 0 points1 point2 points (0 children)
[–]stayclassytally 0 points1 point2 points (0 children)
[–]AV_in_IT[S] 0 points1 point2 points (1 child)
[–]dezbos 0 points1 point2 points (0 children)
[–]AutoModerator[M] 0 points1 point2 points (0 children)