Nel

Nel

  • 1.2k
  • 716
  • 1m

Changing the colors of infoboxes dynamically

Sep 17 2014 10:32 AM

Hi,
I want to change the color of infobox depending on one of the values which are part of the infobox's content. I tried like this:

if(mark[1]<10)
  {
  boxText.style.cssText = "border: 1px solid black; margin-top: 8px; background:green; padding: 5px;";
 
  }
  else if(40<mark[1]<50)
  {
  boxText.style.cssText = "border: 1px solid black; margin-top: 8px; background:  #acb6e5; padding: 5px;"; 
  }
  else if(50<mark[1]<60)
  {
  alert("mark[1]"+mark[1]);
  boxText.style.cssText = "border: 1px solid black; margin-top: 8px; background:#c4ace5 ; padding: 5px;";
 
  }
  else if(60<mark[1]<70)
  {
  alert("mark[1]"+mark[1]);
  boxText.style.cssText = "border: 1px solid black; margin-top: 8px; background: #ace5db; padding: 5px;";
 
  }
  else if(70<mark[1]<80)
  {
  alert("mark[1]"+mark[1]);
  boxText.style.cssText = "border: 1px solid black; margin-top: 8px; background: #b6e5ac; padding: 5px;"; 
  }
 else
  {
  boxText.style.cssText = "border: 1px solid black; margin-top: 4px; text-wrap:unrestricted; background:#e5acb6; color:#000000; font-family:Arial; font-size:10px; padding: 5px; border-radius:6px; -webkit-border-radius:6px; -moz-border-radius:6px;";
 
  }
  boxText.innerHTML = '<div id="content">' + '<b class="marker-heading">' + markerData[i].address + '</b>' + "<br>" + '<b>' + "-------------" + "<br>" + markerData[i].state + "<br>" + markerData[i].cycles + "<br>" + markerData[i].Los + '</b>';
 infoboxOptions = {
  content: boxText,
  disableAutoPan: false,
  maxWidth: 0,
  pixelOffset: new google.maps.Size(-60, 0), //-140,0
  zIndex: null,
  boxStyle: {//17.09
  background: "url('http://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobox/examples/tipbox.gif') no-repeat",
  opacity: 0.75,
  width: "70px" //it was 280px
  },
  closeBoxMargin: "10px 4px 2px 2px", //12px 4px 2px 2px
  closeBoxURL: "http://www.google.com/intl/en_us/mapfiles/close.gif",
  infoBoxClearance: new google.maps.Size(1, 1),
  isHidden: false,
  pane: "floatPane",
  enableEventPropagation: false
  };
  newMarkers.push(marker);
 
  newMarkers[i].infobox = new InfoBox(infoboxOptions);
 
  newMarkers[i].infobox.open(map, marker);
  google.maps.event.addListener(marker, 'click', (function (marker, i) {
  return function () {
  newMarkers[i].infobox.open(map, this);
  map.panTo(markerData[i].latLng);
  }
  })(marker, i)); 
 but then all the infoboxes have the same colors as the color for the first marker that appears, no metter what the value in the content is. Can anybody help me how to solve this?
Thanks

PS I tried to add this as well

             google.maps.event.addDomListener(document.getElementById('infobox'),
 'change', function() {
     newMarkers[i].infobox.style=this.cssText
 });

but it doesn't work