例−47：地図の一部に地図画像を表示する(Adobe Flex)

グラウンドオーバーレイを使って、画像をマッピングしています。
画像はhttp://www.freemap.jp/のものを着色して使っています。
グラウンドオーバーレイを使うと、ズームしたときも自動で再描画してくれます

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" 
	layout="absolute" xmlns:local="local.*" xmlns:maps="com.google.maps.*">
	
	<maps:Map width="100%" height="100%" id="map_canvas" language="ja"
		 key="[MAPS_API_KEY]" mapevent_mapready="{onMapReady(event);}" />
	
	<mx:Script>
		<![CDATA[
			import com.google.maps.overlays.GroundOverlayOptions;
			import com.google.maps.overlays.GroundOverlay;
			import com.google.maps.controls.ZoomControl;
			import com.google.maps.LatLngBounds;
			import com.google.maps.overlays.Marker;
			import com.google.maps.overlays.MarkerOptions;
			import com.google.maps.LatLng;
			import com.google.maps.Map;
			import com.google.maps.MapEvent;
			
			private function onMapReady(event : MapEvent) : void {
				//地図の初期化処理
				var initPos : LatLng = new LatLng(35.272882, 138.360903);
				var initZoom : Number = 10;
				this.map_canvas.setCenter(initPos, initZoom);
				
				//ズームコントロールの追加
				var zoomCtrl : ZoomControl = new ZoomControl();
				this.map_canvas.addControl(zoomCtrl);
				  				
				//静岡市の地図を重ね合わせる
				var bounds : LatLngBounds
					 = new LatLngBounds(
							new LatLng(34.898311796424736, 138.08281235595703),
							new LatLng(35.64745282217641,138.63899521728516)
						);
				addMyMap("shizuoka_city.png", bounds);
			}
			
			private function addMyMap(imgUrl : String
									, bounds : LatLngBounds) : void {
				var urlLoader : Loader = new Loader();
				var urlRequest:URLRequest = new URLRequest(imgUrl);
				
				urlLoader.contentLoaderInfo.addEventListener(
					Event.COMPLETE, function(event : Event):void {
					
					var groundOverlay:GroundOverlay
						 = new GroundOverlay(urlLoader, bounds);
					
					map_canvas.addOverlay(groundOverlay);
				});
				
				urlLoader.load(urlRequest);
			}
			
		]]>
	</mx:Script>
</mx:Application>

ダウンロード