Change Google Geochart marker into a custom png icon

Question

I would like to ask for help how to change the circle marker in Google Geochart

I have already implemented the answer on this link.

appendChild to SVG defs to create Image Background in Marker for Geochart API

But no luck the marker is still there.

Here is my code:

    <html>
  <head>
    <script type='text/javascript' src='https://www.google.com/jsapi'></script>
    <script type="text/javascript">
        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 & BÆRUM"},1,"ASKER & BÆRUM"]]);
                ivalue_1['NO-02'] = 'NO-02||ASKER & BÆRUM||ASKER & 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);
  </script>
  </head>
  <body>
    <div id='map_canvas_1' class='i_world_map' style="width:288px; height: 215px;"></div>
  </body>
</html>

This code is not working. the marker is still green and I cannot change it into a custom png icon. Please help me.

Thank you in advance.

Answer 1

You have to fill all your markers with the image pattern inside defs tag, here is the Demo-Jqfaq , adding below code at the bottom of "geochart, 'ready'" function will make it work.

var markers =  document.getElementsByTagName('circle');
for(i=0; i<markers.length;i++)
{
markers[i].setAttribute("fill", "url(#img1)");
}

Change Google Geochart marker into a custom png icon

Question

1 answers

solution1
2 ACCPTED 2014-07-03 12:31:31

Change Google Geochart marker into a custom png icon

Question

1 answers

solution1 2 ACCPTED 2014-07-03 12:31:31

solution1
2 ACCPTED 2014-07-03 12:31:31