Image as Marker

An example of a Google Geo Chart with images instead of markers

by cmoreira

HTML

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
       <div class="iwm_map_canvas" id="regions_div"></div>

CSS

.iwm_map_canvas circle { display:none; }

JavaScript

//Copy this function
function iwm_callback() {
   
   //EDIT THIS BLOCK
   var imageurl = 'http://simpleicon.com/wp-content/uploads/wordpress.png';
   var width = '20';
   
   
   //No need to edit the rest below
   var intwidth = -(parseInt(width)/2);
   var transform = 'translate('+intwidth+','+intwidth+')';
   
   var imageicon = document.createElementNS('http://www.w3.org/2000/svg', 'image');
   imageicon.setAttributeNS('http://www.w3.org/1999/xlink', 'href', imageurl);
     imageicon.setAttribute('transform', transform);
     imageicon.setAttribute('height', width);
     imageicon.setAttribute('width', width);
     imageicon.setAttribute('preserve','xMaxYMax meet')
     
     jQuery('.iwm_map_canvas circle').each(function(){
     
     	var x = jQuery(this).attr('cx');
      var y = jQuery(this).attr('cy');
      
      jQuery(this).replaceWith(jQuery(imageicon).clone().attr('x',x).attr('y',y));

     
     });
   
   }
   
   
   
   //IGNORE CODE BELOW
   
   google.charts.load('current', {'packages':['geochart']});
      google.charts.setOnLoadCallback(drawRegionsMap);

      function drawRegionsMap() {

        var data = google.visualization.arrayToDataTable([
          ['Country', 'Popularity'],
          ['United States', 300],
          ['Brazil', 400],
          ['Canada', 500],
          ['France', 600],
        ]);

        var options = {
        displayMode:'markers',
        tooltip:{trigger:'focus'}
        };

        var chart = new google.visualization.GeoChart(document.getElementById('regions_div'));
                        google.visualization.events.addListener(chart, 'ready', function() {


                    if (typeof iwm_callback == 'function') {
                        iwm_callback();
                    }

                   

                });

        chart.draw(data, options);
      }