show multiColor Circles in google map

Question

I have HTML page and contain

Header

<script type="text/javascript">
var citymap = {};

var cityCircle;

var myCenter  = new google.maps.LatLng(55,55);

function initialize()
{
    var mapProp =
        {
        center:myCenter,
        zoom:5,
        mapTypeId:google.maps.MapTypeId.TERRAIN
    };

    var map=new google.maps.Map(document.getElementById("googleMap"),mapProp);
    var i = 0 ; 

    for (var city in citymap) {
        var populationOptions = {
          strokeColor: '#FF0000',
          strokeOpacity: 0.8,
          strokeWeight: 2,
          fillColor: '#FF0000',
          fillOpacity: 0.35,
          map: map,
          center: citymap[city].center,
          radius: 10000
        };
        // Add the circle for this city to the map.
        cityCircle = new google.maps.Circle(populationOptions);

        // show tweeeeetsssssssss /////// 
        google.maps.event.addListener(cityCircle, 'click', function() {                     
           //alert(text);
        });

        /*
        google.maps.event.addListener(cityCircle, 'click', function() {
            new google.maps.InfoWindow({content: 'hello!'}).open(map, cityCircle);
        });*/

      }

as we show ... I draw a google map and define a circle with properties . In the part of body page ... I have array of java-script which contain the coordinates

body

<javascript>

Coordinates[i] = {
         center: new google.maps.LatLng(latitude,longitude),
         };
</javasript>

now ... all circles will draw in same ( color . radios ... etc )... what I want is how can I change this properties of the circles like for example ( I want 3 circle red ... 4 blue ... ).thx :-)

Not sure what the problem is... set a different `fillColor` inside `populationOptions` for each circle, and it will have a different color. Did you try this and run into a problem? — Hamza Kubba, May 13 '14 at 22:15
the problem is that the propreties of circle is exist in initialize function ... that is why I can define many circle color ... know what I mean ? — AsoooNol, May 13 '14 at 22:22
Hrmmm, not really? Not sure what you mean... can you add a color to the `city` objects inside `citymap`? Then you can just do `fillColor: city.color` or something along those lines... — Hamza Kubba, May 13 '14 at 22:23
It would be helpful if you told us where the list of colors would be... — Hamza Kubba, May 13 '14 at 22:25

score 0 · Accepted Answer · edited May 23 '17 at 10:33

0

Just set the strokeColor to a random (or predefined) color...

Here's a random function I like (from Best way to generate a random color in javascript?):

strokeColor: '#'+(0x1000000+(Math.random())*0xffffff).toString(16).substr(1,6)

Edit: As pointed out you'll probably want to generate the color first:

var color = '#'+(0x1000000+(Math.random())*0xffffff).toString(16).substr(1,6)`

And then set both

strokeColor: color,
fillColor: color

Re-edit: So add the color to your array:

Coordinates[i] = {
    center: new google.maps.LatLng(latitude,longitude),
    color: '#ff0000'
};

and use that

strokeColor: citymap[city].color,
fillColor: citymap[city].color

(I don't see the link from Coordinates to citymap, but I guess you have that handled)

edited May 23 '17 at 10:33

Community

1
1

answered May 13 '14 at 22:16

Mikk3lRo

3,477
17
38

I don't want random ... I want to determent It Not show like random :( – AsoooNol May 13 '14 at 22:19
I'm new here and clearly misunderstood the question, what is best practice, delete the answer or leave it? – Mikk3lRo May 13 '14 at 22:47
@Mikk3lRo thx alot ... that is what I'm looking for ... can u tell another thing when I click on circle I want to alert the coordinates ... I wort function addListener but It show my the last coordinates when I click on Any circle – AsoooNol May 13 '14 at 23:05
I think you are supposed to open a new question for that, but this may answer it: http://stackoverflow.com/questions/15208965/google-map-add-click-listener-to-each-polygon – Mikk3lRo May 14 '14 at 04:53

show multiColor Circles in google map

1 Answers1