JSFiddle - React, Tailwind, and code Playground
by cmoreira
HTML
<script src="http://www.google.com/jsapi?fake=.js"></script>
<div id="visualization"></div>
<iframe id="iframe1" src="http://jqfaq.com/AdPage.html" style="width:100%;border:none;" />
CSS
#visualization circle { stroke-width:0px; }
JavaScript
google.load('visualization', '1', { 'packages': ['geochart'] });
google.setOnLoadCallback(drawVisualization);
function drawVisualization() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Country');
data.addColumn('number', 'Resources : ');
data.addRows([[{ v: 'USA', f: ' HeadOffice' }, 15]]);
data.addRows([[{ v: 'India', f: 'Branch' }, 15]]);
var options = {
legend: 'none',
width: "600",
height: "400",
displayMode: 'markers',
sizeAxis: { minValue: 15, maxValue: 15, minSize: 15, maxSize: 15 },
region: 'world'
};
var chart = new google.visualization.GeoChart(document.getElementById('visualization'));
google.visualization.events.addListener(chart, 'ready', function () {
createMarkerImage("img1", "http://upload.wikimedia.org/wikipedia/commons/e/e0/Us_flag_large_51_stars.png");
document.getElementsByTagName('circle')[0].setAttribute("fill", "url(#img1)");
createMarkerImage("img2", "http://upload.wikimedia.org/wikipedia/commons/b/bc/Flag_of_India.png")
document.getElementsByTagName('circle')[1].setAttribute("fill", "url(#img2)");
});
chart.draw(data, options);
}
function createMarkerImage(id, url) {
var patt = document.createElementNS('http://www.w3.org/2000/svg', 'pattern');
patt.setAttribute('id', id);
patt.setAttribute('width', '30');
patt.setAttribute('height', '30');
var image = document.createElementNS('http://www.w3.org/2000/svg', 'image');
image.setAttributeNS('http://www.w3.org/1999/xlink',...