[C#]구글맵을 이용한 나만의 지도 만들기[0]

이번에는 구글맵을 이용해서 나만의 지도 애플리케이션을 만들어 보겠습니다.

2018년도 7월 16일부터 새롭게 구글맵 API 정책이 유료로 바뀌면서 기존 방식과 다르게 구현해 보았습니다.

 

먼저 솔루션을 아래와 같이 생성해줍니다.

솔루션 이름은 GoogleMapTest입니다.

 

솔루션을 생성하고 기본 윈폼 위에 아래와 같은 구성을 컨트롤을 배치시켜 줍니다.

기본 UI는 아래 그램과 같습니다.

윈폼 상단에 ToolStrip 컨트롤을 Dock 속성 Top으로 붙여줍니다.

ToolStrip 컨트롤의 구성은 찾고자 하는 지역의 주소 또는 지명을 입력할 수 있는 TextBox 창이 하나 있고, 그 옆에는 mapType을 정할 수 있는 콤보상자를 하나 추가하였습니다. 그리고 해당 지역 맵으로 이동할 수 있는 Play 버튼을 만들어 줍니다. 

윈폼 하단에는 browser 컨트롤을 올려서 실제 지도가 표시되도록 panel을 배치 하겠습니다.

그런데 .Net에서 제공하는 webBrowser 컨트롤을 사용하게 되면 webBrowser 컨트롤의 기본 브라우저가 IE 이기 때문에 자바스크립트 오류 메시지가 발생하여 사용이 제한됩니다.

따라서 우리는 Nuget 패키지 관리자에서 크롬 브라우저를 사용할 수 있도록 도와주는 오픈소스 라이브러리를 찾아 크롬 기반의 browser를 사용하겠습니다.

아래 그림처럼 Nuget 패키지 관리자에서 CefSharp.WinForms를 검색해서 설치해 줍니다.

설치가 완료되면 DLL 참조 추가를 해 주어야 합니다. DLL을 다운로드하기 위해서는 위 그림의 프로젝트 URL 주소를 클릭해서 접속합니다.

위 그림처럼 Code 버튼을 클릭하고 "Download ZIP"를 클릭하여 다운로드합니다.

다운로드한 파일을 압축 해제하고 폴더 내 모든 파일들을 솔루션 실행파일 폴더에 추가해 줍니다.

 

다시 솔루션으로 돌아와서 실제 참조에 Dll을 추가시켜주겠습니다.

참조 관리자에서 찾아보기 버튼을 클릭하고 우리가 복사해 둔 파일 중에서 아래 DLL 3개를 찾아 추가해 줍니다.

참조가 추가되면 아래 그림과 같이 참조 관리자에 dll이 추가된 것을 확인할 수 있습니다.

마지막으로 실제 소스코드상에서 우리가 참조시킨 DLL을 사용하기 위해 using문을 추가해 줍니다.

using CefSharp;
using CefSharp.WinForms;

 

이제 크롬 브라우저를 사용할 준비가 모두 끝났습니다.

 

다음은 ToolStrip의 콤보상자와 Play 버튼 처리기를 등록해 보겠습니다.

ToolStrip 콤보상자에 Items를 추가하기 위해서는 ToolStrip 콤보상자를 선택하고 오른쪽 속성에서 Items (컬렉션)을 클릭하여 "문자열 컬렉션 편집기"를 열어줍니다.

여기에 우리가 맵에서 선택할 mapType을 문자열로 추가해 줍니다.

우리가 사용할 문자열은 "맵", "위성" 두 가지 입니다.

Play 버튼은 더블클릭하여 자동으로 버튼처리기를 등록할 수 있습니다.

private void toolStripButton1_Click(object sender, EventArgs e)
{
}

 

이제 기본적인 모든 준비가 끝났습니다.

UI를 구성하였고, 크롬 브라우저를 사용하기 위해서 Dll을 추가시켜주었습니다.

 

다음 포스팅에서는 기능 구현을 중심으로 포스팅을 이어나가도록 하겠습니다.

감사합니다.