Unite Markers on Google Geochart

by cmoreira

HTML

<script src="http://www.google.com/jsapi?fake=.js"></script>
This is made easier with the <a href="http://cmoreira.net/interactive-world-maps-demo/">Interactive World Maps WP Plugin</a>
<div id="visualization"></div>

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', 'Value'); 
 data.addColumn({type:'string', role:'tooltip'});
                              

 data.addRows([[{v:'USA',f:' USA'},0,'tooltip']]);
  data.addRows([[{v:'RU',f:' USA'},0,'tooltip']]);

 
 var options = {
 colorAxis:  {minValue: 0, maxValue: 0,  colors: ['#6699CC']},
 legend: 'none',    
 backgroundColor: {fill:'transparent',stroke:'#FFF' ,strokeWidth:0 },    
 datalessRegionColor: '#f0f0f0',
 displayMode: 'markers', 
 enableRegionInteractivity: 'true', 
 resolution: 'continents',
 sizeAxis: {minValue: 1, maxValue:1,minSize:10,  maxSize: 10},
 region:'world',
 keepAspectRatio: true,
 width:400,
 height:300,
 tooltip: {textStyle: {color: '#444444'}}    
 };
  var chart = new   google.visualization.GeoChart(document.getElementById('visualization')); 
  
 google.visualization.events.addListener(chart, 'ready', function () {

    var marker01 = document.getElementsByTagName('circle')[0];
    var m01x = marker01.getAttribute("cx");
    var m01y = marker01.getAttribute("cy");

	  var marker02 = document.getElementsByTagName('circle')[1];
    var m02x = marker02.getAttribute("cx");
    var m02y = marker02.getAttribute("cy");

    var path = document.createElementNS('http://www.w3.org/2000/svg', 'line');
    path.setAttribute('x1', m01x);
    path.setAttribute('y1', m01y);
    path.setAttribute('x2', m02x);
    path.setAttribute('y2', m02y);
    path.setAttribute('stroke', '#6699CC');
    path.setAttribute('stroke-width', '2');

    var svg = document.getElementsByTagName('svg')[0];
    
    svg.appendChild(path);

 });


 chart.draw(data, options);


 }