Changing the color scheme of the map of Google Maps Component

If you have seen websites like Volkswagen "Think Blue." Road Trip before, you would probably have seen the Google Map that was in Blue color. So how do you actually do that in Flash? That would be my main objective of sharing this post today. :)

The following would be the source codes of my Flash File.

package com.TintGoogleMap
{
 //Import the classes required for Google Maps
 import com.google.maps.LatLng;
 import com.google.maps.Map;
 import com.google.maps.MapEvent;
 import com.google.maps.MapType;
 import com.google.maps.controls.MapTypeControl;
 import com.google.maps.controls.PositionControl;
 import com.google.maps.controls.ZoomControl;
 
 import flash.display.MovieClip;
 import flash.display.Sprite;
 import flash.events.Event;
 import flash.filters.ColorMatrixFilter;
 import flash.geom.Point;
 
 //Import the Component Class for Numeric Stepper
 import fl.controls.NumericStepper;
 
 public class Main extends Sprite
 {
  private var myMap:Map;
  //Set the base width and height of the Flash File
  private var baseWidth:Number = 800;
  private var baseHeight:Number = 600;
  private var _mcMap:MovieClip;
  private var _mcColorControls:MovieClip;
  
  public function Main()
  {
   //execute the function 'addToStageEvent' when the flash file
   //have been added to stage.
   this.addEventListener(Event.ADDED_TO_STAGE, addToStageEvent); 
  }
  
  private function resizeEvent(event:Event):void
  {
   //Move the holder of the Map to the top left corner
   //of the flash file
   _mcMap.x = (stage.stageWidth - baseWidth) / -2;
   _mcMap.y = (stage.stageHeight - baseHeight) / -2;
   
   //Move the controls to the bottom right of the flash file
   _mcColorControls.x = baseWidth + 
    (stage.stageWidth - baseWidth) / 2;
   _mcColorControls.y = baseHeight + 
    (stage.stageHeight - baseHeight) / 2;
   
   //Resize the Google Map Component to fill up the flash file
   myMap.setSize(new Point(stage.stageWidth, stage.stageHeight));
  }
  
  private function addToStageEvent(event:Event):void
  {
   _mcMap = this.getChildByName("mcMap") as MovieClip;
   _mcColorControls = this.getChildByName("mcColorControls") as MovieClip;
   setupStepperControls();
   
   //setup the Google Map Component and add it to the map holder
   myMap = new Map();
   myMap.key = "your_api_key";
   myMap.sensor = "false";
   //execute the function 'onMapReady' when the map is ready 
   //or created success
   myMap.addEventListener(MapEvent.MAP_READY, onMapReady);
   resizeEvent(null);
   _mcMap.addChild(myMap);
   
   //execute the function 'resizeEvent' when the flash file
   //have been resized
   stage.addEventListener(Event.RESIZE, resizeEvent);
   resizeEvent(null);
  }
  
  private function onMapReady(event:Event):void {
   //add the respective Google Map Component controls
   myMap.addControl(new ZoomControl());
   myMap.addControl(new PositionControl());
   myMap.addControl(new MapTypeControl());
   updateColorScheme();
  }  
  
  private function setupStepperControls():void
  {
   var tempSelector:NumericStepper;
   for (var i:int = 0; i < (_mcColorControls.numChildren - 1); i ++)
   {
    tempSelector = _mcColorControls.getChildAt(i) as NumericStepper;
    
    //execute the function 'updateColorScheme' when the 
    //values of the NumericStepper have been changed
    if(tempSelector)
     tempSelector.addEventListener(Event.CHANGE, updateColorScheme);
   }
  }
  
  public function updateColorScheme(event:Event = null):void  
  {  
   var matrix:Array = new Array();
   var colorArray:Array = ["R","G","B","A"];
   var tempSelector:NumericStepper;
   //Create a fake matrix(Array) based on the values of the
   //NumericStepper on the bottom right of the screen
   for(var i:int = 0; i < colorArray.length; i ++)
   {
    for(var j:int = 0; j < 5; j ++)
    {
     tempSelector = _mcColorControls.getChildByName("mc" + 
      colorArray[i] + "" + j) as NumericStepper;
     matrix.push(tempSelector.value);
    }
   }
   
   _mcColorControls.txtOutput.text = "[" + matrix.toString() + "]";
   
   //Create a Color Matrix Filter and apply the filter to the
   //Google Map Component
   var CMF:ColorMatrixFilter = new ColorMatrixFilter(matrix);  
   mapArea.filters = [CMF];  
  }  
  
  //getter function to get the main map which will be used in
  //changing the colors
  public function get mapArea():*  
  {  
   var mapPart:* = myMap.getChildAt(1);  
   return mapPart.getChildAt(0);  
  }  
 }
}

* Click here to view the demo of this example.
^ Click here for the source files of this demo.

** Click here for the website of Volkswagon Singapore "Think Blue" Road Trip.
^^ Click here for the blog of JActionScripters, that have taught me about
   the secret behind this.
-- Click here to learn more about Color Matrix Filter in Flash.
~~ Click here to learn more about the Class ColorMatrixFilter in Flash.