Pan Zoom Script

HTML

<script src="http://www.google.com/jsapi?fake=.js"></script>

<iframe width="593" height="367" seamless frameborder="0" scrolling="no" src="https://docs.google.com/a/woolworths.com.au/spreadsheets/d/e/2PACX-1vTG-hUiILm7455wLRJuvkTCcI9Ve4pf0LKAxHhj8fFxNX6Ao-RgK9kpVkl6nj1CSbfm3du-idfzTNqb/pubchart?oid=1330024759&amp;format=interactive"></iframe>

<div id="canvas">
<div id="visualization"></div>
</div>
<a href="#" onclick="zoomin();">ZOOM IN</a> | <a href="#" onclick="zoomout();">ZOOM OUT</a> | <a href="#" onclick="left();">LEFT</a> | <a href="#" onclick="right();">RIGHT</a> | <a href="#" onclick="up();">UP</a> | <a href="#" onclick="down();">DOWN</a>

CSS

body {
        background:#FFF;
    }
#canvas {
    width:400px;
    height:300px;
    overflow:hidden;
}

#visualization {
top:0px;
left:0px;
}

JavaScript

var mh = 300;
var mw = 400;
var x = 0;
var y = 0;



google.load('visualization', '1', {'packages': ['geochart']});
google.setOnLoadCallback(drawVisualization);
 

function drawVisualization(mw,mh) {
      
if( !mw ) { mw = 400; }    
if( !mh ) { mh = 300; }      
      
      
      var data = new google.visualization.DataTable();

 data.addColumn('number', 'Lat');                                
 data.addColumn('number', 'Long');
 data.addColumn('string','tooltip'); 
 data.addColumn('number','Example');
 data.addColumn({type:'string', role:'tooltip'});
                                
data.addRows([[41.151636,-8.569336,'Portugal',0,'test PT']]);
data.addRows([[ 39.059575,-98.789062,'USA',1,'test US']]);
                               
 
 var options = {
 colorAxis:  {minValue: 0, maxValue: 1,  colors: ['#6699CC','#9966CC']},
 legend: 'none', 
 displayMode: 'markers', 
 enableRegionInteractivity: 'true', 
 resolution: 'countries',
 sizeAxis: {minValue: 1, maxValue:1,minSize:5,  maxSize: 5},
 region:'world',
 width:mw,
 height:mh,   
 };
                                
  var chart = new google.visualization.GeoChart(document.getElementById('visualization')); 
  
//CODE TO APPEND SCRIPT
                                
google.visualization.events.addListener(chart, 'ready', function () {
   
var script = document.createElementNS('http://www.w3.org/2000/svg', 'script');     
script.setAttributeNS('http://www.w3.org/1999/xlink', 'xlink:href', 'http://www.cyberz.org/projects/SVGPan/SVGPan.js');        
var svg = document.getElementsByTagName('svg')[0];
svg.appendChild(script);
});                                

         
 chart.draw(data, options);
 
 
 }
 
 function zoomin() {
    mw = mw+50;
    mh = mh+50;
    x = x-25;
    y = y-25;
    document.getElementById('visualization').style.top = y +'px';
    document.getElementById('visualization').style.left = x +'px';
    drawVisualization(mw,mh);
 }
 
  function zoomout() {
    if(mw > 400) {
    mw = mw-50;
   ...