title: giving different color to each map icon after fetching the location from database
body: <p>My program fetches the location from the database and locates in the map with same icon color. How can i give a different colour for each result. My code is given below please help.  </p>
  
  <pre><code>        &lt;script type="text/javascript"&gt;
              //&lt;![CDATA[
  
              var map;
  
              // Ban Jelacic Square - Center of Zagreb, Croatia
              var center = new google.maps.LatLng(12.906519056569701, 74.85069555664063);
               var geocoder = new google.maps.Geocoder();
               var infowindow = new google.maps.InfoWindow();
              function init() {
  
                  var mapOptions = {
                      zoom: 10,
                      center: center,
                      mapTypeId: google.maps.MapTypeId.ROADMAP
                  }
  
                  map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
                  makeRequest('get_location.php', function(data) {
  
              var data = JSON.parse(data.responseText);
  
              for (var i = 0; i &lt; data.length; i++) {
                  displayLocation(data[i]);
              }
          });
  
             }
      function displayLocation(location) {
  
  
          var content =   '&lt;div class="infoWindow"&gt;&lt;strong&gt;'  + location.lat + '&lt;/strong&gt;'
                          + '&lt;br/&gt;'     + location.lon
                           '&lt;/div&gt;';
  
          if (parseInt(location.lat) == 0) {
              geocoder.geocode( { 'address': location.address }, function(results, status) {
                  if (status == google.maps.GeocoderStatus.OK) {
  
                      var marker = new google.maps.Marker({
                          map: map, 
                          position: results[0].geometry.location,
  
                          title: location.name
                      });
  
                      google.maps.event.addListener(marker, 'click', function() {
                          infowindow.setContent(content);
                          infowindow.open(map,marker);
                      });
                  }
              });
          } else {
              var position = new google.maps.LatLng(parseFloat(location.lat), parseFloat(location.lon));
              var pinColor = "FE7569";
              var icon = {
          url: "http://www.google.com/intl/en_us/mapfiles/ms/micons/green-dot.png", //url
          scaledSize: new google.maps.Size(15, 15), //scaled size
          origin: new google.maps.Point(0,0), //origin
          anchor: new google.maps.Point(0, 0) //anchor
      };
  
              var marker = new google.maps.Marker({
  
                  map: map, 
                  position: position,
                   icon: icon,
                   title: location.name
              });
  
              google.maps.event.addListener(marker, 'click', function() {
                  infowindow.setContent(content);
                  infowindow.open(map,marker);
              });
          }
      }      
  
              function makeRequest(url, callback) {
          var request;
          if (window.XMLHttpRequest) {
              request = new XMLHttpRequest(); // IE7+, Firefox, Chrome, Opera, Safari
          } else {
              request = new ActiveXObject("Microsoft.XMLHTTP"); // IE6, IE5
          }
          request.onreadystatechange = function() {
              if (request.readyState == 4 &amp;&amp; request.status == 200) {
                  callback(request);
              }
          }
          request.open("GET", url, true);
          request.send();
      }
              //]]&gt;
              &lt;/script&gt;
          &lt;/head&gt;
          &lt;body onload="init();"&gt;
  
              &lt;h1&gt;&lt;/h1&gt;
  
              &lt;section id="sidebar"&gt;
                  &lt;div id="directions_panel"&gt;&lt;/div&gt;
              &lt;/section&gt;
  
              &lt;section id="main"&gt;
                  &lt;div id="map_canvas" style="width: 70%; height: 500px;"&gt;&lt;/div&gt;
              &lt;/section&gt;
  
          &lt;/body&gt;
      &lt;/html&gt;
  </code></pre>
  
  <p>This file fetches the data from database
      get_location.php
      
  
  <pre><code>    require 'config.php';
  
      try {
  
          $db = new PDO($dsn, $username, $password);
          $db-&gt;setAttribute( PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION );
  
          $sth = $db-&gt;query("SELECT * FROM locations");
          $locations = $sth-&gt;fetchAll();
  
          echo json_encode( $locations );
  
      } catch (Exception $e) {
          echo $e-&gt;getMessage();
      }
  </code></pre>