관리 메뉴

nkdk의 세상

이제 구글 맵 (google map)도 내 손으로 직접 설정할 수 있게 되었다.^^ 본문

My Programing/Flex&AIR

이제 구글 맵 (google map)도 내 손으로 직접 설정할 수 있게 되었다.^^

nkdk 2008. 7. 29. 18:11

예전부터 구글맵 만들어 보고 싶었었는데 기회가 되서 구글맵 적용해서 플렉스로 적용해서 성공했다.
정말 잘 만들었다 ^_^

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"
  width="100%" height="100%" initialize="init()">
 
 <mx:Script>
 <![CDATA[
  import com.google.maps.controls.ZoomControl;
  import com.google.maps.controls.MapTypeControlOptions;
  import com.google.maps.MapUtil;
 import com.google.maps.controls.MapTypeControl;
 import mx.controls.Alert;

 import com.google.maps.Map;
 import com.google.maps.MapEvent;
 import com.google.maps.MapType;
 import com.google.maps.LatLng;
 
 private var gMap:Map;
 private var zoomval:int=16;

 private function init():void
 {
  gMap = new Map();
  gMap.key = "자신의 api key";  
  gMap.addControl(new ZoomControl);
  gMap.addControl(new MapTypeControl);
 
  gMap.addEventListener(MapEvent.MAP_READY, mapReadyHandler);  
  mapContainer.addChild(gMap);
 }
 
 private function mapReadyHandler(e:MapEvent):void
 {    
  gMap.setCenter(new LatLng(35.169123,136.890188), zoomval, MapType.HYBRID_MAP_TYPE);
  gMap.setSize(new Point(mapContainer.width, mapContainer.height));
 }
   
 ]]>
 </mx:Script>  
 <mx:UIComponent id="mapContainer" width="100%" height="100%"/>
 <mx:Canvas width="109" height="70" x="10" y="10">
  <mx:Label x="56" y="24" text="ZOOM" fontSize="12"/>
 </mx:Canvas>
</mx:Application>

자세한 사항은 아래의 내용을 보면 된다. 그리고 구글맵 키를 생성해서 받아야 한다.

http://www.joinc.co.kr/modules/moniwiki/wiki.php/Site/Google/Service/GoogleMapAPI

http://code.google.com/apis/maps/documentation/flash/basics.html