title: Change Google Geochart marker into a custom png icon
body: <p>I would like to ask for help how to change the circle marker in Google Geochart</p>
  
  <p>I have already implemented the answer on this link.</p>
  
  <p><a href="https://stackoverflow.com/questions/12611078/appendchild-to-svg-defs-to-create-image-background-in-marker-for-geochart-api">appendChild to SVG defs to create Image Background in Marker for Geochart API</a></p>
  
  <p>But no luck the marker is still there.</p>
  
  <p>Here is my code:</p>
  
  <pre><code>    &lt;html&gt;
    &lt;head&gt;
      &lt;script type='text/javascript' src='https://www.google.com/jsapi'&gt;&lt;/script&gt;
      &lt;script type="text/javascript"&gt;
          var ivalue_1 = new Array();google.load('visualization', '1', {packages: ['geochart']});function drawVisualization() {
          var data = new google.visualization.DataTable();
          data.addColumn('string', 'Country'); // Implicit domain label col.
          data.addColumn('number', 'Value'); // Implicit series 1 data col.
          data.addColumn({type:'string', role:'tooltip', p:{html:true}}); 
          data.addRows([[{v:"NO-02",f:"ASKER &amp; BÆRUM"},1,"ASKER &amp; BÆRUM"]]);
                  ivalue_1['NO-02'] = 'NO-02||ASKER &amp; BÆRUM||ASKER &amp; BÆRUM||lorem ipsum';
                      data.addRows([[{v:"NO-03",f:"Oslo"},2,"Oslo"]]);
                  ivalue_1['NO-03'] = ' NO-03||Oslo||Oslo||lorem ipsum';
                      data.addRows([[{v:"NO-01",f:"Østfold"},3,"Østfold"]]);
                  ivalue_1['NO-01'] = ' NO-01||Østfold||Østfold||lorem ipsum';
                      data.addRows([[{v:"NO-07",f:"Vestfold"},4,"Vestfold"]]);
                  ivalue_1['NO-07'] = ' NO-07||Vestfold||Vestfold||lorem ipsum';
                      data.addRows([[{v:"NO-11",f:"Rogaland"},5,"Rogaland"]]);
                  ivalue_1['NO-11'] = ' NO-11||Rogaland||Rogaland||lorem ipsum';
                      data.addRows([[{v:"NO-06",f:"Buskerud"},6,"Buskerud"]]);
                  ivalue_1['NO-06'] = ' NO-06||Buskerud||Buskerud||lorem ipsum';
                      var options = {   colorAxis: {minValue: 1, maxValue:6,  colors: ['#349429','#349429','#349429','#349429','#349429','#349429']},
          legend: 'none', 
          backgroundColor: {fill:'transparent',stroke:'#CCCCCC' ,strokeWidth:0 },     
          datalessRegionColor: '#ddd',
          displayMode: 'markers', 
          sizeAxis: {minValue: 1, maxValue:6,minSize:10,  maxSize: 10},
          enableRegionInteractivity: 'true',
          resolution: 'provinces',
          region:'NO',keepAspectRatio: false,width:'',
          height:'215',
          tooltip: {isHtml: true, textStyle: {color: '#555555'}, trigger:'focus'} 
  
        };var geochart = new google.visualization.GeoChart(
            document.getElementById('map_canvas_1'));
      google.visualization.events.addListener(geochart, 'select', function() {
      var selection = geochart.getSelection();
  
          if (selection.length == 1) {
              var selectedRow = selection[0].row;
              var selectedRegion = data.getValue(selectedRow, 0);
  
          var japol = ivalue_1[selectedRegion].split('||');
          jQuery("#lightBoxContent h2 span").append(japol[1]); 
          jQuery("#lightBoxContent h3 span").append(japol[2]); 
          jQuery("#lightBoxContent h4 span").append(japol[3]); 
          jQuery("#transparentlightbox").fadeIn("slow");            
          }
  
          geochart.draw(data, options);
        });
  
      google.visualization.events.addListener(geochart, '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', 'https://cdn1.iconfinder.com/data/icons/yooicons_set01_socialbookmarks/512/social_google_box.png');
                  image.setAttribute('x', '0');
                  image.setAttribute('y', '0');
                  image.setAttribute('width', '24');
                  image.setAttribute('height', '24');
  
                  var defs = document.getElementsByTagName('defs')[0];
  
                  patt.appendChild(image);
                  defs.appendChild(patt);});
  
                  geochart.draw(data, options);
      }
      google.setOnLoadCallback(drawVisualization);
    &lt;/script&gt;
    &lt;/head&gt;
    &lt;body&gt;
      &lt;div id='map_canvas_1' class='i_world_map' style="width:288px; height: 215px;"&gt;&lt;/div&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>This code is not working. the marker is still green and I cannot change it into a custom png icon. Please help me.</p>
  
  <p>Thank you in advance.</p>