CODEWITHSUNDEEP
javascriptapigoogle-maps
Jahir hussain
Jahir hussain

Reputation: 19

How to change the circle color in google maps api dynamically?

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. 

<?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) > 0) {
    while($row = mysqli_fetch_assoc($result)) {
        $yourArray[$index] = $row;
   // echo "id: " . $row["id"]. " - lat: " . $row["latitude"]. "- log:  " . $row["longitude"]. "<br>";
     $index++;
    }
} 

else {
    echo "0 results";
}


mysqli_close($conn);

for($x=0;$x<$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];


?>	




<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <title>Circles</title>
    <style>
      html, body {
        height: 100%;
        margin: 0;
        padding: 0;
      }
      #map {
        height: 100%;
      }
    </style>
  </head>
  <body>
    <div id="map"></div>
    <script>
            // 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();

<?php

$test_str =  "var citymap = {";

for($i = 0; $i < $number; $i++){

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

}

$test_str .= "};" ;

echo $test_str;
?>



      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
          });
        }
      }
    </script>
    <script async defer
    src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAZMU3v1pUYZuf8Bbiv6YQi5N3IY7pTQxc&callback=initMap">
    </script>
  </body>
</html>

This is my page : http://mybbb.esy.es/xmltest.php

View this so that you can find where the problem exists.

The color values are stored like this in a database table : #B22122

Upvotes: 1

Views: 6372

Answers (2)

taymyinl
taymyinl

Reputation: 295

you can set circle stoke color and fill color like that.

circle.setOptions({
                        fillColor: '#F5F5F5',
                        strokeColor: '#528BE2'
                    });

You need to put inside event.

here is full code circle will change when mouse is over.

google.maps.event.addListener(circle, 'mouseover', function () {
                    console.log('la la la');
                    circle.setOptions({
                        fillColor: '#F5F5F5',
                        strokeColor: '#528BE2'
                    });
                });

Upvotes: 9

ScaisEdge
ScaisEdge

Reputation: 133380

you can use setOptions 

cityCircle.setOption( strokeColor: '#00FF00');

Upvotes: 0

Related Questions