G_MAPMAKER_NORMAL_MAP を Flashで使えるようにする

Google Maps API version2でのみ使用できる「G_MAPMAKER_NORMAL_MAP」を Flashでも利用できるようにしたサンプルです。 ポイントは、ExternalInterfaceを使用してFlashからJavaScriptの関数を呼び出し、JavaScript側でG_MAPMAKER_NORMAL_MAPのURLを取得するようにするところです。 HTML側では、allowScriptAccess を always に設定してください。

Main.mxml

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
			   xmlns:s="library://ns.adobe.com/flex/spark" 
			   xmlns:mx="library://ns.adobe.com/flex/mx"
			   creationComplete="{init();}"
			   width="100%" height="100%"
			   xmlns:maps="com.google.maps.*" viewSourceURL="g_mapmarker_normal_map_for_flash/notheme/srcview/index.html">

	<maps:Map width="100%" height="100%" id="map_canvas" sensor="false"
		key="[MAPS_API_KEY]" />
	<fx:Script>
		<![CDATA[
			import com.google.maps.CopyrightCollection;
			import com.google.maps.LatLng;
			import com.google.maps.MapEvent;
			import com.google.maps.MapType;
			import com.google.maps.MapTypeOptions;
			import com.google.maps.TileLayerBase;
			import com.google.maps.controls.MapTypeControl;
			import com.google.maps.controls.ZoomControl;
			import com.google.maps.interfaces.ICopyrightCollection;
			import com.google.maps.interfaces.IMapType;
			import com.google.maps.interfaces.IProjection;
			import com.google.maps.interfaces.ITileLayer;
			
			private function init() : void {
				this.map_canvas.addEventListener(MapEvent.MAP_READY, mapCanvas_mapReady);
			}
			
			private function mapCanvas_mapReady(event : MapEvent) : void {
				var init_pos : LatLng = new LatLng(35.65861, 139.745447);
				var init_zoom : Number = 5;
				
				var mapType : IMapType = MapType.NORMAL_MAP_TYPE;
				var mapTypeName : String = "G_MAPMAKER_NORMAL_MAP";
				var mapTypeProjecton : IProjection = mapType.getProjection();
				var mapLayer : ITileLayer = mapType.getTileLayers()[0];
				var copyRightCollection : ICopyrightCollection = mapLayer.getCopyrightCollection();
				var maxZoom : Number = mapType.getMaximumResolution();
				var minZoom : Number = mapType.getMinimumResolution();
				var new_mapLayer : ITileLayer = new ExtTileLayerBase(copyRightCollection, minZoom, maxZoom);
				var tileLayers : Array = [new_mapLayer];
				
				var mapTypeOpts : MapTypeOptions = new MapTypeOptions();
				mapTypeOpts.alt = mapType.getAlt();
				mapTypeOpts.errorMessage = mapType.getErrorMessage();
				mapTypeOpts.linkColor = mapType.getLinkColor();
				mapTypeOpts.maxResolution = maxZoom;
				mapTypeOpts.minResolution = minZoom;
				mapTypeOpts.radius = mapType.getRadius();
				mapTypeOpts.shortName = "G_MAPMAKER_NORMAL_MAP";
				mapTypeOpts.textColor = mapType.getTextColor();
				mapTypeOpts.tileSize = mapType.getTileSize();
				mapTypeOpts.urlArg = mapType.getUrlArg();
				
				var G_MAPMAKER_NORMAL_MAP: MapType = new MapType(tileLayers, mapTypeProjecton, mapTypeName, mapTypeOpts);
				
				this.map_canvas.setCenter(init_pos, init_zoom);
				this.map_canvas.addControl(new MapTypeControl);
				this.map_canvas.addMapType(G_MAPMAKER_NORMAL_MAP);
				
				this.map_canvas.addControl(new ZoomControl);
			}
		]]>
	</fx:Script>
</s:Application>

ExtTileLayerBase.as

package
{
	import com.google.maps.Alpha;
	import com.google.maps.TileLayerBase;
	import com.google.maps.interfaces.ICopyrightCollection;
	import com.google.maps.interfaces.ITileLayer;
	
	import flash.display.DisplayObject;
	import flash.display.Loader;
	import flash.external.ExternalInterface;
	import flash.geom.Point;
	import flash.net.URLRequest;
	
	public class ExtTileLayerBase extends TileLayerBase implements ITileLayer
	{
		public function ExtTileLayerBase(copyrightCollection:ICopyrightCollection,
										 minResolution:Number = NaN,
										 maxResolution:Number = NaN,
										 alpha:Number=Alpha.OPAQUE) {
			super(copyrightCollection, minResolution, maxResolution, alpha);
		}

		public override function loadTile(tilePos:Point, zoom:Number):DisplayObject {
			var url : String = ExternalInterface.call("extLoadTile",tilePos.x, tilePos.y, zoom);
			var loader:Loader = new Loader();
			loader.load(new URLRequest(url));
			return loader;
		}
	}
}

HTML

<html>
  <head>
    <title></title>
    <meta name="google" value="notranslate">     
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <script src="http://maps.google.co.jp/maps?file=api&amp;v=2&amp;key=[MAPS_API_KEY]" type="text/javascript"></script>
    
    <script type="text/javascript">
    <!--
    var tileLayer = G_MAPMAKER_NORMAL_MAP.getTileLayers()[0];
    function extLoadTile(x, y, zoom) {
      return tileLayer.getTileUrl(new GPoint(x, y), zoom);
    }
    //-->
    </script>
  </head>
  <body>
    <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="100%" height="100%" id="Main">
      <param name="movie" value="main.swf" />
      <param name="quality" value="high" />
      <param name="bgcolor" value="#ffffff" />
      <param name="allowScriptAccess" value="always" />
      <param name="allowFullScreen" value="true" />
      <object type="application/x-shockwave-flash" data="main.swf" width="100%" height="100%">
        <param name="quality" value="high" />
        <param name="bgcolor" value="#ffffff" />
        <param name="allowScriptAccess" value="always" />
        <param name="allowFullScreen" value="true" />
        <a href="http://www.adobe.com/go/getflashplayer">
          <img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash Player" />
        </a>
      </object>
    </object>
   </body>
</html>