Google Maps API 활용하기

구글에서는 지도에 관한 api를 제공하는데 해당 주소는 아래와 같다.
http://code.google.com/apis/maps/ 

위 사이트에 가면 오른쪽 How do I start? 밑으로 몇개의 메뉴가 있는데

먼저 1 . Sign up for a Google Mpas API key. 라는 곳으로 간다.

맵을 사용하기 위해서는 key를 등록해야 하는데 이곳에서 등록이 가능하다.

체크박스에 체크표시를 한 후

My web site URL: 이라는 곳에 맵을 사용할 주소를 입력하고

Generate API Key 버튼을 클릭하면 자신의 key값이 나오고 그것을 사용하면 된다.

다시 처음 화면으로 돌아와서 메인화면 아랫부분에

Google Mpas API for Flash 를 클릭해서 오른쪽에 Download the Google Maps API for Flash SDK 에서 SDK를 클릭하고 다운받으면 된다.

다운받아 압축을 풀면 폴더안에 확장자가 swc로 된 파일이 있다.

이것을 프로젝트에 등록(해당 프로젝트 안의 lib폴더안에 복사하면 된다.)하면 사용이 가능하다.

사용 예제는 아래와 같다.

※지도상에 debug mode라는 글자가 나오는것은 키값에 해당하는 주소가 아니기 때문이다.
키값을 입력하고 키값에 해당하는 주소에 맵을 적용시킨다면 글자는 안보이게 된다.

<?xml version="1.0" encoding="utf-8" ?> <!-- Copyright 2007 Google Inc. --> <!-- All Rights Reserved. --> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="100%" height="100%"> - <mx:Panel title="Google Maps API for Flash - Simple Map" width="100%" height="100%"> <mx:UIComponent id="mapContainer" initialize="startMap(event);" resize="resizeMap(event)" width="100%" height="100%" /> </mx:Panel> <mx:Script> <![CDATA[ import flash.events.Event; import com.google.maps.MapEvent; import com.google.maps.Map; import com.google.maps.MapType; import com.google.maps.LatLng; private var map:Map; public function startMap(event:Event):void { map = new Map(); map.addEventListener(MapEvent.MAP_READY, onMapReady); mapContainer.addChild(map); } public function resizeMap(event:Event):void { map.setSize(new Point(mapContainer.width, mapContainer.height)); } private function onMapReady(event:Event):void { map.setCenter(new LatLng(40.736072,-73.992062), 14, MapType.NORMAL_MAP_TYPE); } ]]> </mx:Script> </mx:Application>
onMapReady메소드 안에서 40.736072, -73.992062는 경도와 위도이고

14는 지도의 비율크기를 뜻하고 MapType.NORMAL_MAP_TYPE는 맵의 형태를 뜻한다.

아래 예제는 경도와 위도를 textInput 상에서 직접 입력하여 이동할 수 있도록
간단하게 응용해 본 것이다.

<?xml version="1.0" encoding="utf-8" ?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="100%" height="100%" fontSize="12"> <mx:Panel title="Google Maps API for Flash - Simple Map" width="100%" height="100%"> <mx:HBox width="100%"> <mx:Label text="경도"/> <mx:TextInput id="longitude" width="80"/> <mx:Label text="위도"/> <mx:TextInput id="latitude" width="80"/> <mx:Button label="확인" click="reChangeCenter(longitude.text,latitude.text)"/> </mx:HBox> <mx:UIComponent id="mapContainer" initialize="startMap(event);" resize="resizeMap(event)" width="100%" height="100%" /> </mx:Panel> <mx:Script> <![CDATA[ import flash.events.Event; import com.google.maps.MapEvent; import com.google.maps.Map; import com.google.maps.MapType; import com.google.maps.LatLng; private var map:Map; public function startMap(event:Event):void { map = new Map(); map.addEventListener(MapEvent.MAP_READY, onMapReady); mapContainer.addChild(map); map.key = "ABQIAAAAbpd-6UMhC6WVAMeSV_-SbxRwpsuZKhZ6or_3dJXEZzo_jXd0iRR1d5tvnOg6ZelJQmhxA1MtAkqSRA" } public function resizeMap(event:Event):void { map.setSize(new Point(mapContainer.width, mapContainer.height)); } private function onMapReady(event:Event):void { map.setCenter(new LatLng(40.736072,-73.992062), 14, MapType.NORMAL_MAP_TYPE); } private function reChangeCenter(longitude:String,latitude:String):void { var lon:Number = Number(longitude); var lat:Number = Number(latitude); map.setCenter(new LatLng(lon,lat), 14, MapType.NORMAL_MAP_TYPE); } ]]> </mx:Script> </mx:Application>

튜토리올도 제공되니 많은 응용을 해 볼수 있으며 이를 이용해 다양한 것들을

만들어 볼 수 있을 것이다.