Check out "Do you speak JavaScript?" - my latest video course on advanced JavaScript.
Language APIs, Popular Concepts, Design Patterns, Advanced Techniques In the Browser

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.

If you enjoy this post, share it on Twitter, Facebook or LinkedIn.