Custom Image as Background of Marker

by cmoreira

HTML

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

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

 data.addRows([[{v:'Los Angeles',f:'Los Angeles'},0,'tooltip']]);
 data.addRows([[{v:'Chicago',f:'Chicago'},0,'tooltip']]);
 data.addRows([[{v:'New York',f:'New York'},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: 'provinces',
 sizeAxis: {minValue: 1, maxValue:1,minSize:10,  maxSize: 10},
 region:'US',
 keepAspectRatio: true,
 width:400,
 height:300,
 tooltip: {textStyle: {color: '#444444'}}    
 };
  var chart = new   google.visualization.GeoChart(document.getElementById('visualization')); 
  
   //CUSTOM CODE STARTS HERE                             
                                
 google.visualization.events.addListener(chart, 'ready', function () {

    
    var patt = document.createElementNS('http://www.w3.org/2000/svg', 'pattern');
     
    patt.setAttribute('id', 'img1');
    patt.setAttribute('patternUnits', 'userSpaceOnUse');
    patt.setAttribute('width', '20');
    patt.setAttribute('height', '20');
    patt.setAttribute('x', '0');
    patt.setAttribute('y', '0');

    
    
    var image = document.createElementNS('http://www.w3.org/2000/svg', 'image');
    image.setAttributeNS('http://www.w3.org/1999/xlink', 'xlink:href', 'http://img32.imageshack.us/img32/4886/spink.png');
    image.setAttribute('x', '0');
    image.setAttribute('y', '0');
    image.setAttribute('width', '20');
    image.setAttribute('height', '20');
    
    var defs =...