circles with different color based on the values in the data using google maps api

Question

I am reading the place names from a csv file and doing geocoding using google maps api. I am using circle icons instead of default red markers. Now i would like to know whether those circle icon can be appear in different colours based on the value in the csv data using google maps api?

for ex i will get a json response for the region_name and average as

$.getJSON(json_link,
                            function (data) {
                                //console.log(data)
                                // response(data);
                                var place_names = [];
                                var average_value = [];
                                for (i=0; i<data.rows.length; i++) {
                                    unique = data.rows[i].region_name;
                                    place_names.push(unique);
                                }
                                for (i=0; i<data.rows.length; i++) {
                                    average_values = data.rows[i].average;
                                    average_value.push(average_values);
                                }
                                console.log(place_names);
                                console.log(average_value);

And those region_names will have corresponding average values which is stored in average_value array. For those particular region_names with their corresponding average_value, i should get the color of the circle icon vary.

And my geocoding part is

var geocoder = new google.maps.Geocoder();
                                var address = place_names;
                                var average = average_value;
                                var color = 'blue'; 
                                console.log(address);
                                for (i=0; i<=address.length; i++) {
                                    if (average[i] >  0 && average[i] < 30) {
                                        color = 'red';
                                    } 
                                    else {
                                        color = 'green';
                                    }
                                    geocoder.geocode({'address': address[i]}, function(results, status) {
                                        if (status === google.maps.GeocoderStatus.OK) {
                                            map.setCenter(results[0].geometry.location);
                                                var marker = new google.maps.Marker({
                                                    position: results[0].geometry.location,
                                                    icon: {
                                                        path: google.maps.SymbolPath.CIRCLE,
                                                        scale: 10,
                                                        fillColor: color,
                                                        fillOpacity: 0.5,
                                                        strokeWeight: 1
                                                    },
                                                    map: map
                                                });

                                        } else {
                                            alert('Geocode was not successful for the following reason: ' + status);
                                        }
                                    });
                                }

Answer 1

you can use sometinghs like this

     var address = place_names;
     var average =  average_value;
     var color = '#F00';
                            console.log(address);

                            for (i=0; i<=address.length; i++) {

                                 if (average[i] >  your_lower_limit && average[i] < you_upper_limit) {
                                    color = '#0F0';
                                 }
                                // repeat for other limit and color 
                                geocoder.geocode({'address': address[i]}, function(results, status) {
                                    if (status === google.maps.GeocoderStatus.OK) {
                                        map.setCenter(results[0].geometry.location);
                                        var marker = new google.maps.Marker({
                                            position: results[0].geometry.location,
                                            icon: {
                                                path: google.maps.SymbolPath.CIRCLE,
                                                scale: 10,
                                                fillColor: color,
                                                fillOpacity: 0.4,
                                                strokeWeight: 0.4
                                            },
                                            map: map
                                        });

Answer 2

You have a syntax error in your code, causing it to run past the end of the array:

for (i = 0; i <= address.length; i++) {

should be

for (i = 0; i < address.length; i++) {

One way to solve your issue with colored icons is to use function closure to associate the color with the callback of the geocoder:

function geocode(address, color, geocoder, map) {
    geocoder.geocode({
        'address': address
    }, function (results, status) {
        if (status === google.maps.GeocoderStatus.OK) {
            map.setCenter(results[0].geometry.location);
            bounds.extend(results[0].geometry.location);
            var marker = new google.maps.Marker({
                position: results[0].geometry.location,
                icon: {
                    path: google.maps.SymbolPath.CIRCLE,
                    scale: 10,
                    fillColor: color,
                    fillOpacity: 0.5,
                    strokeWeight: 1
                },
                map: map
            });
            map.fitBounds(bounds);

        } else {
            alert('Geocode was not successful for the following reason: ' + status);
        }
    });
}

proof of concept fiddle

code snippet:

 var place_names = ["New York, NY", "Newark, NJ", "Boston, MA", "Baltimore, MD"]; var average_value = [5, 40, 20, 60]; var bounds = new google.maps.LatLngBounds(); function initialize() { var map = new google.maps.Map( document.getElementById("map_canvas"), { center: new google.maps.LatLng(37.4419, -122.1419), zoom: 13, mapTypeId: google.maps.MapTypeId.ROADMAP }); var geocoder = new google.maps.Geocoder(); var address = place_names; var average = average_value; var color = 'blue'; console.log(address); for (i = 0; i < address.length; i++) { if (average[i] > 0 && average[i] < 30) { color = 'red'; } else { color = 'green'; } geocode(address[i], color, geocoder, map); } } google.maps.event.addDomListener(window, "load", initialize); function geocode(address, color, geocoder, map) { geocoder.geocode({ 'address': address }, function(results, status) { if (status === google.maps.GeocoderStatus.OK) { map.setCenter(results[0].geometry.location); bounds.extend(results[0].geometry.location); var marker = new google.maps.Marker({ position: results[0].geometry.location, icon: { path: google.maps.SymbolPath.CIRCLE, scale: 10, fillColor: color, fillOpacity: 0.5, strokeWeight: 1 }, map: map }); map.fitBounds(bounds); } else { alert('Geocode was not successful for the following reason: ' + status); } }); }

 html, body, #map_canvas { height: 100%; width: 100%; margin: 0px; padding: 0px }

 <script src="https://maps.googleapis.com/maps/api/js"></script> <div id="map_canvas"></div>