CODEWITHSUNDEEP
javascriptjquerygoogle-mapsflask
VimalSheoran
VimalSheoran

Reputation: 55

Dynamically Changing The Color Of A Circle Drawn On Google Maps

I have been trying to change the color of a circle on the google map by using the data that I have on my Flask server. Being specific, I want to send a request to the server at set intervals of time and set the response equal to the fill color of the circle.

I have tried using Ajax and then writing my initMap function inside and looping the entire thing using setInterval. But, it does not help. This time I created an event to do the same but, I get an undefined error. Here is the code,

var time_changed = function(){
setInterval(time_changed, 5000)
}

var options = {
    center: {
        lat: 30.416497 ,
        lng: 77.967186
    },
    zoom: 10
 };

 var element = document.getElementById('map-canvas');

function initMap(){
    var map = new google.maps.Map(options, element);
      var circle  = new google.maps.Circle({
            map : map,
            center : new google.maps.LatLng(30.416497,77.967186),
            radius: 100,
            strokeColor : '#ffffff',
            fillColor: 'green',
            editable : true,
            draggable : true
        });

circle.addListener('time_changed', function(){
    var xhttp =  new XMLHttpRequest();
    xhttp.onreadystatechange = function(){
        if(xhttp.readyState == 4 && xhttp.status == 200){
            circle.setOptions({
                fillColor : xhttp.responseText
            });
        }
    }
    xhttp.open('GET', 'http://127.0.0.1:5000/data', true);
    xhttp.send();
});

}

This is the last thing I tried this morning and I am getting this error. 

TypeError: d is undefined                   common.js 174:49

Common.js is not a file I created.

I am really not able to problem solve this.

And just for being more accurate, here is the server script

from flask import Flask, render_template, Response

app = Flask(__name__)

@app.route('/')
def index():
    data = 1
    if data > 0:
        value = 100
    return render_template('index.html')

@app.route('/data')
def data_service():
    data = 'red'
    return Response(data, mimetype='text/plain')


if __name__ == '__main__':
    app.run(debug = True)

Upvotes: 0

Views: 557

Answers (1)

Jose G Varanam
Jose G Varanam

Reputation: 767

You can try with the 

[circleObject].setOptions({
  strokeColor: [new color],
  fillColor: [new color],
});

You need to use the circle object for updating the color

Upvotes: 1

Related Questions