How to use Google Maps API in flash
Google offers a lot of free tools for us. One of them is really useful and easy to work with - GoogleMaps API. In this article I will show you how to import a map in Flash and place an icon in a specific place.
First of all you have to download the necessary libraries. You can do that from here. In the zip file you will find "map_1_18.swc" file which you have to import in Flash. Basically .swc files are designed to be used in Flex, but you can still add them in any .fla file. Copy the file to your Components directory. For Windows(XP) users the folder is located here:
C:\\Program Files\\Adobe\\Adobe Flash CS3\\{language}\\Configuration\\Components
_Note that there is a separate directory for each language supported in Flash CS3. Place the SWC within whatever language directory you will be authoring Flash content. In other words {language} in the line above could be "en" for example._For Mac users:
Macintosh HD/Applications/Adobe Flash CS3/Configuration/Components
You should restart Flash and open the Component panel (Ctrl+F7). The GoogleMapsLibraries should appear there.[1]Drag the GoogleMapsLibraries component to your Library panel (F11). Now all the necessary classes are automatically added and they are available for use. Here is the code of the application:
package lib.document {
import com.google.maps.overlays.Marker;
import com.google.maps.overlays.MarkerOptions;
import com.google.maps.controls.PositionControl;
import com.google.maps.controls.ZoomControl;
import com.google.maps.LatLng;
import com.google.maps.Map;
import com.google.maps.MapEvent;
import com.google.maps.MapType;
import flash.events.Event;
import flash.events.MouseEvent;
import flash.geom.Point;
import flash.display.MovieClip;
public class App extends MovieClip {
private var _map: Map;
private var _icon: MovieClip;
public
function App() {
trace("App");
// creating the icon that will be placed on the map
_icon = new Icon();
_icon.buttonMode = true;
_icon.mouseChildren = false;
_icon.gotoAndStop(1);
// setting events of the icon's MovieClip
_icon.addEventListener(MouseEvent.MOUSE_OVER, onIconOver);
_icon.addEventListener(MouseEvent.MOUSE_OUT, onIconOut);
_icon.addEventListener(MouseEvent.CLICK, onIconClick);
// creating the map
_map = new Map();
// setting the api key
_map.key = "ABQIAAAAfBguyoRoviza91LOZY2cvhSp6DGTZp--f0ai0VME2kXYI48iIRS4M0numGI4YqWLBJHFT_n38jcACA";
// setting the size of the map
_map.setSize(new Point(500, 500));
// adding events
_map.addEventListener(MapEvent.MAP_READY, onMapReady);
_map.addEventListener(MapEvent.MAP_INITIALIZE_FAILED, onMapFailed);
// adding the zoom control
_map.addControl(new ZoomControl());
// adding the position control
_map.addControl(new PositionControl());
// adding the map on the stage
addChild(_map);
}
// this function calls when the map is loaded
private function onMapReady(e: MapEvent): void {
trace("onMapReady");
// setting the center of the map. You should know the exact coords of the place. For example latitude=43.214597 and longitude=27.915716 is Varna, Bulgaria _map.setCenter(new LatLng(43.214597, 27.915716), 14, MapType.NORMAL_MAP_TYPE);
// setting the zoom of the map
_map.setZoom(5);
// enable the scroll wheel
_map.enableScrollWheelZoom();
// enable the continuous zoom
_map.enableContinuousZoom();
// adding the icon on the map
_map.addOverlay(new Marker(new LatLng(43.214597, 27.915716), new MarkerOptions({
icon: _icon
})));
}
// this function calls when the map loading failed
private function onMapFailed(e: MapEvent): void {
trace("onMapFailed");
}
private function onIconOver(e: Event): void {
trace("onIconOver");
e.target.gotoAndStop(2);
}
private function onIconOut(e: Event): void {
trace("onIconOut");
e.target.gotoAndStop(1);
}
private function onIconClick(e: Event): void {
trace("onIconClick");
}
}
}
Please notice that you should have a valid key(line:37) to be able to use the api. You should generate your own key depending on your domain. It's free and you can do it here.The result could be seen here. Source files are available here. A detailed information regarding the API is located here.