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.

PHP / Google Maps API: Playing around driving directions in Google Maps API

If you are going to build a website that requires frequent access to Google Maps, it will be great if you can help the user to enhance their experience of the website by reducing the number of calls to the Google Maps API and access the data stored in your server if a similar search had been created before? In this example, I will show you how to access the data used to build a driving direction in Google Maps using a few lines of codes in Php.

Here's the php code that I would be using:

<?php 
//Getting the description of the starting point and URLEncode it
$saddr = urlencode($_GET['saddr']);
//Getting the description of the ending point and URLEncode it
$daddr = urlencode($_GET['daddr']);
//Generate the URL of the search
$url = "http://maps.google.com/maps?f=d&source=s_d&daddr=".$daddr."&geocode=&ie=UTF8&output=kml&saddr=".$saddr;

//Checks if the server supports the php function 'file_get_contents'
if (function_exists('file_get_contents')) {
 //Grab the contents of the generated URL and display it on the browser
 $route = file_get_contents($url);
 echo $route;
} else {
 //Error message will be displayed if the server does not support the 'file_get_contents' function
    echo "file_get_contents functions are not available.
\n";
}
?>

And here's a simple html that I had created to point to the above php file:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>


</head>

 
Start Point:
 
 
 
Ending Point:
 
 
 
 

</html>

Click here to see the above example.
You can try entering 'Liang Court, Singapore' in the 1st field and 'Jurong Bird Park, Singapore' in the 2nd field. After clicking on the 'Submit' button, it will bring you to a page providing you with the kml/xml formatted data. Which is what we want XD.

Click here for the source files used in this example.

Next Steps: once you have managed to display the results in the browser, you could either save the kml/xml data in a text file or a database for easy access in the future.