how to set google map icon color change per second

Question

i have set red text marker , but i want to show obviously, how to change marker color per second (for example like red and blue change per second )? Is this possible?

function createMarkerIcon(text, opt) {

   var defaultOptions = 
   {
     fontStyle: "normal", //normal, bold, italic
     fontName: "Arival",
     fontSize: 12, 
     bgColor: "#999999",
     fgColor: "white",
     padding: 4,
     arrowHeight: 6 
   };
   options = $.extend(defaultOptions, opt);

   var canvas = document.createElement("canvas"),
   context = canvas.getContext("2d");

   var font = options.fontStyle + " " + options.fontSize + "px " + 
                       options.fontName;
   context.font = font;
   var metrics = context.measureText(text);

   var w = metrics.width + options.padding * 2;

   var h = options.fontSize + options.padding * 2 +options.arrowHeight;
   canvas.width = w;
   canvas.height = h;

   context.beginPath();
   context.rect(0, 0, w, h - options.arrowHeight);
   context.fillStyle = options.bgColor;
   context.fill();

   context.beginPath();
   var x = w / 2, y = h, arwSz = options.arrowHeight;
   context.moveTo(x, y);
   context.lineTo(x - arwSz, y - arwSz);
   context.lineTo(x + arwSz, y - arwSz);
   context.lineTo(x, y);
   context.fill();

   context.textAlign = "center";
   context.fillStyle = options.fgColor;
   context.font = font;
   context.fillText(text,
       w / 2,
       (h - options.arrowHeight) / 2 + options.padding);

   return canvas.toDataURL();
}

marker = new google.maps.Marker({
                position: lat,
                map: map, 
                content: redloc[j][1],
                title: addressDetails[5],
                icon: createMarkerIcon(addressDetails[3], {
                    bgColor:"#FF0000"  })                
                //icon: "http://labs.google.com/ridefinder/images/mm_20_green.png"
});

Any help will be greatly appreciated!? andrew

Answer 1

Marker objects have setIcon() method which can be used to change the icon of the marker. If you want to change icon every x seconds, then you must call setIcon() in setInterval() function:

var color = "red";

setInterval(function() {
   if(color === "blue") {
      // set color red
      marker.setIcon(createMarkerIcon("some text", {
            bgColor:"#FF0000"  }));

      // If you have multiple markers, uncomment below and comment above
      /*for(var i = 0; i < markerArray.length; i++) {
          markerArray[i].setIcon("http://labs.google.com/ridefinder/images/mm_20_red.png");
      }*/
      color = "red";
   } else {
      // set color blue
      marker.setIcon(createMarkerIcon("some text again", {
            bgColor:"#0900FF"  }));

      // If you have multiple markers, uncomment below and comment above
      /*for(var i = 0; i < markerArray.length; i++) {
         markerArray[i].setIcon("http://labs.google.com/ridefinder/images/mm_20_red.png");
      }*/

      color = "blue";
   }
}, 1000 ); // every 1 second

You should add this after you define marker (or if you have multiple markers, add after you push created markers to marker array). Note that I used your createMarkerIcon() as parameter for setIcon().

DEMO -- UPDATED FOR MULTIPLE MARKERS