GoogleMap 소개

GoogleMap은 구글에서 제공하는 지도를 화면에 출력할 때 사용하는 컴포넌트입니다. 구글 지도를 사용하려면 HTML 페이지를 만들고 구글에서 제공하는 API를 사용해서 로딩하는 과정이 필요하지만 GoogleMap 컴포넌트를 사용하면 좀 더 손쉽게 구글 지도를 제어할 수 있습니다.

사용 예

다음은 Citi Bike 라는 구글 지도를 이용한 자전거 대여 서비스의 화면입니다. 지도상에 자전거를 대여할 수 있는 위치와 대여 가능 상태를 마커로 표시해 주어 사용자가 지도만 보고도 정보를 파악할 수 있습니다.

지도 보여주기

GoogleMap 컴포넌트를 사용해 화면에 지도를 출력하는 예제를 만들어 봅니다.

폼에 GoogleMap과 Button 컴포넌트를 생성합니다.

Show Map 버튼의 onclick 이벤트 함수를 다음과 같이 작성합니다.

this.Button00_onclick = function(obj:nexacro.Button,e:nexacro.ClickEventInfo)
{
	this.GoogleMap00.load(false, 11.96832946, 121.922996308, 0, 12);
	this.GoogleMap00.set_apikey(nexacro.getApplication().googleMapAPIKey);	
	this.GoogleMap00.set_showzoom(true);
};

load 메소드의 인수는 앞에서부터 사용자 gps 사용 여부, 북위 좌표, 동경 좌표, 지도 모드, 줌 레벨입니다. 인수에 대한 더 자세한 설명은 레퍼런스가이드를 참조하시기 바랍니다.

showzoom 속성을 true로 설정하면 지도상에 줌 버튼을 표시합니다. + 버튼을 누르면 확대 - 버튼을 누르면 축소됩니다.

퀵뷰(Ctrl + F6)를 실행하여 결과를 확인합니다. Show Map 버튼을 클릭하면 화면에 보라카이 지도가 출력되며 마우스와 키보드를 이용해 지도를 이동 및 확대/축소할 수 있습니다.

apikey

GooglaMap 컴포넌트를 사용하기 위해서는 API KEY값을 load 메소드 호출 전에 입력해주어야 합니다. API KEY 값을 입력하지 않은 경우에는 아래와 같이 워터마크가 표시된 상태로 지도가 노출됩니다.

지도에 마커 추가/삭제하기

GoogleMap 컴포넌트에 로딩한 지도의 특정 좌표에 마커를 추가하거나 삭제할 수 있습니다. 마커는 지도상에 어떤 표시를 할 때 사용합니다.

예제

다음은 구글 지도에서 보라카이 섬(위도 11.96832946, 경도 121.922996308)을 출력하고 같은 좌표에 마커를 표시하는 예입니다. 예제의 버튼은 각각 다음과 같은 기능을 합니다.

sample_googlemap_02.xfdl

예제에서 사용한 핵심 기능

load

구글 지도를 화면에 로딩하는 메소드입니다. 사용자 GPS 정보 사용 여부, 위도, 경도, 지도 모드, 줌 등의 설정이 가능합니다.

this.GoogleMap00.load(false, 11.96832946, 121.922996308, 0, 13);

showzoom

구글 지도에 줌(확대/축소) 컨트롤의 표시 여부를 설정하는 속성입니다.

GoogleMapMarker

지도의 특정 좌표에 마커를 표시할 때 사용하는 오브젝트입니다. 마커의 속성(draggable, imageurl, latitude, longitude, text, visible)을 설정할 수 있습니다.

addItem

구글 지도에 표시할 아이템(마커, 원, 선, 다각형)을 추가하는 메소드입니다. 여러 개의 아이템을 추가할 때에는 아이템 ID를 다르게 설정해야 합니다.

removeItem

구글 지도에 표시한 아이템(마커, 원, 선, 다각형)을 제거하는 메소드입니다. 추가한 아이템이 없는 상태에서 사용하면 false를 반환하고 onerror 이벤트가 발생합니다.

예제 구현 방법

예제와 같이 폼에 GoogleMap과 Button 컴포넌트를 생성합니다.

Add Marker, Del Marker 버튼의 enable 속성을 false로 설정합니다.

Show Map, Add Marker, Del Marker 버튼의 onclick 이벤트 함수를 각각 다음과 같이 작성합니다.

• Show Map 버튼 이벤트 함수

특정 좌표의 지도를 화면에 출력합니다.

this.Button00_onclick = function(obj:nexacro.Button,e:nexacro.ClickEventInfo)
{
	this.GoogleMap00.set_showzoom(true);
	this.GoogleMap00.set_apikey(nexacro.getApplication().googleMapAPIKey);	
	this.GoogleMap00.load(false, 11.96832946, 121.922996308, 0, 13);
};

• Add Marker 버튼 이벤트 함수

GoogleMapMarker 객체를 생성하고 속성을 설정한 후 addItem 메소드로 마커를 지도에 추가합니다.

this.Button01_onclick = function(obj:nexacro.Button,e:nexacro.ClickEventInfo)
{
	var objGoogleMapMaker = new nexacro.GoogleMapMarker();
	
	objGoogleMapMaker.set_latitude(11.96832946);
	objGoogleMapMaker.set_longitude(121.922996308);
	objGoogleMapMaker.set_text("Default Marker");
	objGoogleMapMaker.set_draggable(true);
	objGoogleMapMaker.set_visible(true);
	
	this.GoogleMap00.addItem("MapMarker", objGoogleMapMaker);
	
	this.Button01.set_enable(false);
	this.Button02.set_enable(true);
};

• Del Marker 버튼 이벤트 함수

지도에 추가한 마커를 제거합니다.

this.Button02_onclick = function(obj:nexacro.Button,e:nexacro.ClickEventInfo)
{
	this.GoogleMap00.removeItem("MapMarker");

	this.Button01.set_enable(true);
	this.Button02.set_enable(false);
};

• GoogleMap onload 이벤트 함수

GoogleMap의 지도를 정상적으로 로딩하면 발생하는 이벤트입니다.

this.GoogleMap00_onload = function(obj:nexacro.GoogleMap,e:nexacro.GoogleMapEventInfo)
{
	trace("loading succeed");
	
	if(this.GoogleMap00.items[0])
	{
		this.GoogleMap00.removeItem(this.GoogleMap00.items[0]);
	}
	
	this.Button01.set_enable(true);
	this.Button02.set_enable(false);
};

• GoogleMap onerror 이벤트 함수

GoogleMap의 동작에 실패하면 발생하는 이벤트입니다.

this.GoogleMap00_onerror = function(obj:nexacro.GoogleMap,e:nexacro.GoogleMapErrorEventInfo)
{
	trace("error: " + e.errormsg);	
};

퀵뷰(Ctrl + F6)를 실행하여 결과를 확인합니다.

Show Map 버튼을 클릭하면 화면에 보라카이 지도가 출력되며 마우스와 키보드를 이용해 지도를 이동 및 확대/축소할 수 있습니다. Add Marker 버튼을 클릭하면 화면에 마커를 추가하고, Del Marker 버튼을 클릭하면 마커를 삭제합니다.

지도에 원 추가/삭제하기

GoogleMap 컴포넌트에 로딩한 지도의 특정 좌표에 원을 추가하거나 삭제할 수 있습니다.

예제

다음은 구글 지도에서 필리핀의 보라카이 섬(위도 11.96832946, 경도 121.922996308)을 출력하고 같은 좌표에 원을 표시하는 예입니다. 예제의 버튼은 각각 다음과 같은 기능을 합니다.

sample_googlemap_03.xfdl

예제에서 사용한 핵심 기능

load

구글 지도를 화면에 로딩하는 메소드입니다. 사용자 GPS 정보 사용 여부, 위도, 경도, 지도 모드, 줌 등의 설정이 가능합니다.

this.GoogleMap00.load(false, 11.96832946, 121.922996308, 0, 13);

showzoom

구글 지도에 줌(확대/축소) 컨트롤의 표시 여부를 설정하는 속성입니다.

GoogleMapCircle

지도의 특정 좌표에 원을 표시할 때 사용하는 오브젝트입니다. 원의 속성을 설정할 수 있습니다.

addItem

구글 지도에 표시할 아이템(마커, 원, 선, 다각형)을 추가하는 메소드입니다. 여러 개의 아이템을 추가할 때에는 아이템 ID를 다르게 설정해야 합니다.

removeItem

구글 지도에 표시한 아이템(마커, 원, 선, 다각형)을 제거하는 메소드입니다. 추가한 아이템이 없는 상태에서 사용하면 false를 반환하고 onerror 이벤트가 발생합니다.

예제 구현 방법

예제와 같이 폼에 GoogleMap과 Button 컴포넌트를 생성합니다.

Add Circle, Del Circle 버튼의 enable 속성을 false로 설정합니다.

Show Map, Add Circle, Del Circle 버튼의 onclick 이벤트 함수를 각각 다음과 같이 작성합니다.

• Show Map 버튼 이벤트 함수

특정 좌표의 지도를 화면에 출력합니다.

this.Button00_onclick = function(obj:nexacro.Button,e:nexacro.ClickEventInfo)
{
	this.GoogleMap00.set_showzoom(true);
	this.GoogleMap00.set_apikey(nexacro.getApplication().googleMapAPIKey);	
	this.GoogleMap00.load(false, 11.96832946, 121.922996308, 0, 13);
};

• Add Circle 버튼 이벤트 함수

GoogleMapCircle 객체를 생성하고 속성을 설정한 후 addItem 메소드로 원을 지도에 추가합니다.

this.Button01_onclick = function(obj:nexacro.Button,e:nexacro.ClickEventInfo)
{
	var objGoogleMapCircle = new nexacro.GoogleMapCircle();
	
	objGoogleMapCircle.set_latitude(11.96832946);
	objGoogleMapCircle.set_longitude(121.922996308);
	objGoogleMapCircle.set_radius(1000);
	objGoogleMapCircle.set_visible(true);	
	
	this.GoogleMap00.addItem("MapCircle", objGoogleMapCircle);
	
	this.Button01.set_enable(false);
	this.Button02.set_enable(true);			
};

• Del Circle 버튼 이벤트 함수

지도에 추가한 원을 제거합니다.

this.Button02_onclick = function(obj:nexacro.Button,e:nexacro.ClickEventInfo)
{
	this.GoogleMap00.removeItem("MapCircle");
	
	this.Button01.set_enable(true);
	this.Button02.set_enable(false);			
};

• GoogleMap onload 이벤트 함수

GoogleMap의 지도를 정상적으로 로딩하면 발생하는 이벤트입니다.

this.GoogleMap00_onload = function(obj:nexacro.GoogleMap,e:nexacro.GoogleMapEventInfo)
{
	trace("loading succeed");
	
	if(this.GoogleMap00.items[0])
	{
		this.GoogleMap00.removeItem(this.GoogleMap00.items[0]);
	}
	
	this.Button01.set_enable(true);
	this.Button02.set_enable(false);	
};

• GoogleMap onerror 이벤트 함수

GoogleMap의 동작에 실패하면 발생하는 이벤트입니다.

this.GoogleMap00_onerror = function(obj:nexacro.GoogleMap,e:nexacro.GoogleMapErrorEventInfo)
{
	trace("error: " + e.errormsg);	
};

퀵뷰(Ctrl + F6)를 실행하여 결과를 확인합니다.

Show Map 버튼을 클릭하면 화면에 보라카이 지도가 출력되며 마우스와 키보드를 이용해 지도를 이동 및 확대/축소할 수 있습니다. Add Circle 버튼을 클릭하면 화면에 원을 추가하고, Del Circle 버튼을 클릭하면 원을 삭제합니다.

지도에 표시되는 언어 및 지역 특성 설정하기

GoogleMap 컴포넌트의 표시 언어와 지역적인 특성을 설정할 수 있습니다. 한국 영토인 독도 같은 경우 지역 특성 설정에 따라 다르게 표시됩니다.

예제

버튼 클릭 시 언어 및 지역 설정된 지도 화면을 표시합니다. 언어 및 지역은 화면 로딩 시 설정된 후 변경할 수 없습니다. 다른 언어 및 지역을 설정하려면 화면을 새로 고침 후 사용해야 합니다.

sample_googlemap_04.xfdl

예제에서 사용한 핵심 기능

language (17.1.0.200 버전부터 지원)

구글 지도에 표시할 언어를 설정합니다.

region (17.1.0.200 버전부터 지원)

구글 지도에 표시할 지역를 설정합니다. 해당 설정에 따라 같은 지명도 다르게 표시될 수 있습니다.

예제 구현 방법

지도 위치는 독도가 표시되는 좌표로 설정했습니다. 로딩 전에 language, region 속성값을 지정합니다.

this.Button00_onclick = function(obj:nexacro.Button,e:nexacro.ClickEventInfo)
{
	this.GoogleMap00.set_showzoom(true);
	this.GoogleMap00.set_apikey(nexacro.getApplication().googleMapAPIKey);	
	this.GoogleMap00.set_language('ko');
	this.GoogleMap00.set_region('KR');
	this.GoogleMap00.load(false, 37.243158, 131.869202, 3, 15);
};