title: google maps javascript api dynamic markers (color)
body: <p>Can you please take a look at the code below and give me suggestion for coloring the marker circles based on the data values in the json file - dustppm variable? I want change the color of the circle markers based on data ranges - such as 0-50 = blue and 51-100 = green. Thanks.    </p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;meta charset="utf-8"&gt;
  &lt;title&gt;Dust Station Map&lt;/title&gt;
  
  &lt;style&gt;
    html, body {
      margin: 0;
      padding: 0;
      width: 100%;
      height: 100%;
    }
  
    #map_canvas {
      width: 100%;
      height: 100%;
    }
  &lt;/style&gt;
  
  &lt;script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?v=3.exp&amp;sensor=true"&gt;&lt;/script&gt;
  
  &lt;script&gt;
    // The web service URL from Drive 'Deploy as web app' dialog.
    var DATA_SERVICE_URL = "https://script.google.com/macros/s/AKfycbwDTcoL4tZ9rBo9BZGHScLnu-32F7RvFJUX8wtOVr-AfwRuTbw/exec?jsonp=callback";
  
    //var map;
  
    function initialize() {
      this.map = new google.maps.Map(document.getElementById('map_canvas'), {
        center: new google.maps.LatLng(37.0, 126.8),
        zoom: 7,
        maxZoom: 20,
        mapTypeId: google.maps.MapTypeId.ROADMAP
      });
  
      //var weatherLayer = new google.maps.weather.WeatherLayer({
      //    temperatureUnits: google.maps.weather.TemperatureUnit.FAHRENHEIT
      //});
      //weatherLayer.setMap(map);
      //var cloudLayer = new google.maps.weather.CloudLayer();
      //cloudLayer.setMap(map);
  
      var scriptElement = document.createElement('script');
      scriptElement.src = DATA_SERVICE_URL;
      document.getElementsByTagName('head')[0].appendChild(scriptElement);
    }
  
      function callback(data) {
      for (var i = 0; i &lt; data.length; i++) {
        var station = data[i][0];
        var location = new google.maps.LatLng(data[i][1], data[i][2]);
        var dustppm = data[i][3];
        addMarker(map, station, location, dustppm);
        } 
      }
  
  var vCircle = getCircle1;
  
  
     function addMarker(map, station, location, dustppm) {   
  
  
  var marker = new google.maps.Marker({
          position: location,
          map: map,
          title: 'Station: ' + station,
          icon: vCircle(dustppm)
        });
  
  
        var infowindow = new google.maps.InfoWindow({
        content: station + ' ppm:' + dustppm
        });
  
        google.maps.event.addListener(marker, 'click', function() {
          infowindow.open(map,marker);
        });
  
      } 
  
      function getCircle1(dustppm) {
          return {
          path: google.maps.SymbolPath.CIRCLE,
          fillColor: 'red',
          fillOpacity: .4,
          scale: dustppm *.2,
          strokeColor: 'white',
          strokeWeight: .5
          };
      }
  function getCircle2(dustppm) {
          return {
          path: google.maps.SymbolPath.CIRCLE,
          fillColor: 'green',
          fillOpacity: .4,
          scale: dustppm *.2,
          strokeColor: 'white',
          strokeWeight: .5
          };
      }
  
      google.maps.event.addDomListener(window, 'load', initialize);
  &lt;/script&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
  &lt;div id="map_canvas"&gt;&lt;/div&gt;
  &lt;script&gt;
  $(document).ready(onload);
  &lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>