title: Google Map icon colour change by value from Fusion Table
body: <p>I have a website at <a href="http://www.gfmap.com" rel="nofollow noreferrer">http://www.gfmap.com</a> and it shows gluten-free restaurants, shops, bakeries, etc. It is run off a Fusion Table with more than 20,000 items. </p>
  
  <p>I want to know if I can change the Google Map icon colour based on the category (restaurant, etc)</p>
  
  <p>Here's the code...</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;     
   var initialLocation; 
   var companyLocale = new google.maps.LatLng(-33.869629, 151.206955); 
   var localArray = [companyLocale]; 
   var noGeo = new google.maps.LatLng(51.506325, -0.127144);        
   var map;    
   var layerl0;    
   function initialize() {
      map = new google.maps.Map(document.getElementById('themap'),
       {
          zoom: 12 
       });
      if(navigator.geolocation) {
          browserSupportFlag = true;
          navigator.geolocation.getCurrentPosition(function(position) {
          initialLocation = new     google.maps.LatLng(position.coords.latitude,position.coords.longitude);
          map.setCenter(initialLocation);
      }, function() {
          handleNoGeolocation(browserSupportFlag);
         });
      }else {
         handleNoGeolocation();
      }
  function handleNoGeolocation() {
    initialLocation = noGeo;
    localArray.unshift(initialLocation);
    map.setCenter(initialLocation);
  }
      var style = [
      {
        featureType: 'administrative.land_parcel',
        elementType: 'all',
        stylers: [
          { visibility: 'off' }
        ]
      }
    ];
  
      var styledMapType = new google.maps.StyledMapType(style, {
        map: map,
        name: 'Styled Map'
      });
    map.mapTypes.set('map-style', styledMapType);
    map.setMapTypeId('map-style');
    layerl0 = new google.maps.FusionTablesLayer({
      query: {
        select: "'location'",
        from: 4015038
      },
      map: map
    });
  }
  function changeMapl0() {
    var searchString = document.getElementById('search-string-l0').value.replace(/'/g, "\\'");
    layerl0.setOptions({
      query: {
        select: "'location'",
        from: 4015038,
        where: "'Type' = '" + searchString + "'"
      }
    });
  }
  google.maps.event.addDomListener(window, 'load', initialize);
  function ga() {
    var address = document.getElementById('q').value;
    if (address != ''){
      var geocoder = new google.maps.Geocoder();
          geocoder.geocode( { 'address': address + ' AU'}, function(results, status) {
            if (status == google.maps.GeocoderStatus.OK) {
              map.setCenter(results[0].geometry.location);
              if (results[0].geometry.location_type == google.maps.GeocoderLocationType.APPROXIMATE){
                map.setZoom(12);
              } else {map.setZoom(12);}
            }
            else {alert("Sorry, we can't find that place using Google.");}
          });
  
    }
  }
  &lt;/script&gt;
  &lt;script type="text/javascript"&gt;
  
  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-31494612-1']);
  _gaq.push(['_trackPageview']);
  (function() {
  var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
  ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
  var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  })();
  
  &lt;/script&gt;
  </code></pre>
  
  <p>I think the answer is related to this post <a href="https://stackoverflow.com/questions/7065604/custom-google-map-icon-if-value-1">Custom Google Map Icon If Value &gt;=1</a> but I cannot make it work. I don't know JavaScript and have really just hacked this website together best I can.</p>
  
  <p>Any help appreciated.</p>
  
  <p>Thanks</p>
  
  <p>Matt</p>