CODEWITHSUNDEEP
google-maps-api-3
willsu21
willsu21

Reputation: 23

google maps javascript api dynamic markers (color)

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. 

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Dust Station Map</title>

<style>
  html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
  }

  #map_canvas {
    width: 100%;
    height: 100%;
  }
</style>

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=true"></script>

<script>
  // 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 < 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);
</script>
</head>

<body>
<div id="map_canvas"></div>
<script>
$(document).ready(onload);
</script>
</body>
</html>

Upvotes: 2

Views: 1500

Answers (1)

Dr.Molle
Dr.Molle

Reputation: 117334

Possible solution:

function getCircle1(dustppm) {

    //custom colors
  var colors={50:'blue',100:'green'},

    //default-color
      color='red';

    for(var k in  colors){
      if(dustppm<=k){
         color=colors[k];
         break;
      }
    }

    return {
    path: google.maps.SymbolPath.CIRCLE,
    fillColor: color,
    fillOpacity: .4,
    scale: dustppm *.2,
    strokeColor: 'white',
    strokeWeight: .5
    };
}

Upvotes: 1

Related Questions