title: Google Map Custom Marker Dependent on Field Value
body: <p>I am using the code below to populate a Google Map with markers for all the lat and lng values I hold in a MySQL database.</p>
  
  <p>What I would like to do, if at all possible, is to extend this a little more and have the ability to show different coloured markers dependent on a field value, to be more specific, if the value in the field 'finds' is zero then it will be one colour, but if it has a value of one or greater for it to be another colour.</p>
  
  <p>I've found how to do this if the field value is a text value but not numeric. I've tried to change my code, to how (from a beginners perspective) I thought it might be be, but I can't get this to work.</p>
  
  <pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&gt;
  &lt;html xmlns="http://www.w3.org/1999/xhtml" lang="en"&gt;
  &lt;head&gt;
  &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt;
  &lt;title&gt;All Locations&lt;/title&gt;
  &lt;link rel="stylesheet" href="css/style.css" type="text/css" media="all" /&gt;
  &lt;script type="text/javascript"
  src="http://maps.google.com/maps/api/js?sensor=false&amp;language=en"&gt;&lt;/script&gt;
  &lt;script type="text/javascript"&gt; 
  
  
  var customIcons = {       
  if 'finds'.value=0: {         
  icon: 'http://labs.google.com/ridefinder/images/mm_20_blue.png',         
  shadow: 'http://labs.google.com/ridefinder/images/mm_20_shadow.png'       
  },       
  else {         
  icon: 'http://labs.google.com/ridefinder/images/mm_20_red.png',         
  shadow: 'http://labs.google.com/ridefinder/images/mm_20_shadow.png'       
  }     
  }; 
  function load() { 
  var map = new google.maps.Map(document.getElementById("map"), { 
  center: new google.maps.LatLng(54.312195845815246,-4.45948481875007), 
  zoom:6, 
  mapTypeId: 'roadmap' 
  }); 
  
  // Change this depending on the name of your PHP file 
  downloadUrl("phphfile.php", function(data) { 
  var xml = data.responseXML; 
  var markers = xml.documentElement.getElementsByTagName("marker"); 
  for (var i = 0; i &lt; markers.length; i++) { 
  var name = markers[i].getAttribute("locationname"); 
  var address = markers[i].getAttribute("address"); 
  var findsvalue = markers[i].getAttribute("finds"); 
  var point = new google.maps.LatLng( 
  parseFloat(markers[i].getAttribute("osgb36lat")), 
  parseFloat(markers[i].getAttribute("osgb36lon"))); 
  var marker = new google.maps.Marker({ 
  map: map, 
  position: point,
  icon: icon.icon, 
  shadow: icon.shadow
  }); 
  } 
  }); 
  } 
  
  function downloadUrl(url, callback) { 
  var request = window.ActiveXObject ? 
  new ActiveXObject('Microsoft.XMLHTTP') : 
  new XMLHttpRequest; 
  
  request.onreadystatechange = function() { 
  if (request.readyState == 4) { 
  request.onreadystatechange = doNothing; 
  callback(request, request.status); 
  } 
  }; 
  
  request.open('GET', url, true); 
  request.send(null); 
  } 
  
  function doNothing() {} 
  
  &lt;/script&gt; 
  
  &lt;/head&gt; 
  
  &lt;body onLoad="load()"&gt; 
  &lt;div id="map"&gt;&lt;/div&gt;
  &lt;/body&gt; 
  &lt;/html&gt;
  </code></pre>