How to change the circle color in google maps api dynamically?
<p>I am new to this forum and currently working with Google maps API for tracking and monitoring purposes. I want to change the color of circle dynamically and the data's are currently stored in a data base. But the problem is i am getting the same color (black) for all the circles. I can't find where i went wrong. Please help me. Below are the code snippets. </p>

<p><div class="snippet" data-lang="js" data-hide="false">
<div class="snippet-code">
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;?php

$latvalue = array();
$longvalue = array();
$population= array();
$color= array();

$servername = "localhost";
$username = "test";
$password = "xxxxxx";
$dbname = "test_db";

// Create connection
$conn = mysqli_connect($servername, $username, $password, $dbname);
// Check connection
if (!$conn) {
    die("Connection failed: " . mysqli_connect_error());
}

$sql = "SELECT * FROM mytable";
$result = mysqli_query($conn, $sql);

$number =mysqli_num_rows($result);
$index = 0;

if (mysqli_num_rows($result) &gt; 0) {
    while($row = mysqli_fetch_assoc($result)) {
        $yourArray[$index] = $row;
   // echo "id: " . $row["id"]. " - lat: " . $row["latitude"]. "- log:  " . $row["longitude"]. "&lt;br&gt;";
     $index++;
    }
} 

else {
    echo "0 results";
}


mysqli_close($conn);

for($x=0;$x&lt;$number;$x++)
{

$latvalue[$x] = $yourArray[$x]['latitude'];

$longvalue[$x] = $yourArray[$x]['longitude'];

$population[$x] = $yourArray[$x]['size'];

$color[$x] = $yourArray[$x]['color'];

}

//echo $latvalue[0];


?&gt; 




&lt;html&gt;
  &lt;head&gt;
    &lt;meta name="viewport" content="initial-scale=1.0, user-scalable=no"&gt;
    &lt;meta charset="utf-8"&gt;
    &lt;title&gt;Circles&lt;/title&gt;
    &lt;style&gt;
      html, body {
        height: 100%;
        margin: 0;
        padding: 0;
      }
      #map {
        height: 100%;
      }
    &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;div id="map"&gt;&lt;/div&gt;
    &lt;script&gt;
            // This example creates circles on the map, representing populations in North
      // America.

      // First, create an object containing LatLng and population for each city.
naming = new Array();

&lt;?php

$test_str =  "var citymap = {";

for($i = 0; $i &lt; $number; $i++){

$test_str .=  $i+1 . ": {center: {lat:" .$latvalue[$i]. ",lng:" . $longvalue[$i] . "}, population: " . $population[$i] . ", color: '". $color[$i]  ."'},";

}

$test_str .= "};" ;

echo $test_str;
?&gt;



      function initMap() {
  // Create the map.
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 16,
    center: {lat: 11.0773756, lng: 76.98866040000007},
    mapTypeId: google.maps.MapTypeId.TERRAIN
  });

        // Construct the circle for each value in citymap.
        // Note: We scale the area of the circle based on the population.
        for (var city in citymap) {
          // Add the circle for this city to the map.
          var cityCircle = new google.maps.Circle({
            strokeColor: '#FFFFFF',
            strokeOpacity: 0.8,
            strokeWeight: 3,
            fillColor: 'citymap[city].color',
            fillOpacity: 0.7,
            map: map,
            center: citymap[city].center,
            radius: Math.sqrt(citymap[city].population) * 1
          });
        }
      }
    &lt;/script&gt;
    &lt;script async defer
    src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAZMU3v1pUYZuf8Bbiv6YQi5N3IY7pTQxc&amp;callback=initMap"&gt;
    &lt;/script&gt;
  &lt;/body&gt;
&lt;/html&gt;</code></pre>
</div>
</div>
</p>

<p>This is my page : <a href="http://mybbb.esy.es/xmltest.php" rel="nofollow">http://mybbb.esy.es/xmltest.php</a></p>

<p>View this so that you can find where the problem exists.</p>

<p>The color values are stored like this in a database table : #B22122</p>