Step by Step: Bing Maps를 이용해서 웹 페이지에 지도를 표시하는 방법

기술 자료: 2268264 - 이 문서가 적용되는 제품 보기.
모두 확대 | 모두 축소

개요

Bing Maps에서 제공하는 지도 서비스를 JavaScript를 이용해서 간단히 여러분이 작성한 웹 페이지에 표시할 수 있습니다. 특히 Bing Maps는 AJAX 기반의 컨트롤 뿐만 아니라 Silverlight 형태의 컨트롤(Bing Maps Silverlight Control SDK)도 제공하고 있어서 웹 페이지 뿐만 아니라 일반 애플리케이션이나 스마트폰 환경에 알맞은 형태로써 지도 서비스를 이용할 수 있습니다.

이 문서에서는 Bing Maps를 JavaScript를 이용하여 웹 페이지에 보여주는 방법을 간단한 예제를 사용해서 설명합니다.

방법

Bing Maps를 이용하여 웹 페이지에 지도를 표시하는 방법에 대해 다음과 같은 3단계로 나누어 설명합니다.

단계 1: Bing Maps Key 생성하기

Bing Maps에서 제공하는 지도 서비스 기능을 이용하기 위해 우선 개발하려는 애플리케이션에 대한 고유한 API Key를 생성해야 합니다.

다음과 같은 방법으로 애플리케이션에서 사용할 Bing Maps Key를 생성합니다.
  1. Bing Maps Account Center (https://www.bingmapsportal.com)에 접속합니다.

  2. [Sign In] 버튼을 클릭한 후 Windows Live ID 계정 정보를 입력하여 로그인합니다.
    (만약 Windows LiveID가 없으면 [Create] 버튼을 클릭해서 새로운 계정을 생성한 후 로그인할 수 있습니다.)
    그림 축소그림 확대
    2268274


  3. 계정 정보에 대한 업데이트를 요청할 경우 다음과 같이 계정 이름과 메일 주소 등의 정보를 입력하고 [Update] 버튼을 클릭합니다.
    그림 축소그림 확대
    2268275


  4. Key 생성을 위해 좌측 메뉴에서 [Create or view keys]를 클릭합니다.
    그림 축소그림 확대
    2268276


  5. Bing Maps를 이용하여 지도 서비스를 제공할 애플리케이션의 이름과 게시될 웹 사이트의 URL을 입력한 후 [Create key] 버튼을 클릭합니다.

    그림 축소그림 확대
    2268277

  6. 다음과 같이 Bing Maps를 이용할 수 있는 Key가 생성된 것을 확인할 수 있습니다.

    그림 축소그림 확대
    2268278


단계 2: Bing Maps를 이용하여 웹 페이지에 지도 보여주기

다음으로 Bing Maps를 이용하여 웹 페이지에 지도를 보여주는 간단한 샘플 웹 페이지를 작성하겠습니다.
  1. 메모장(notepad.exe)을 실행하여 다음과 같이 소스 코드를 작성합니다.

    <html>

    <head>



    <!-- Bing Maps AJAX 컨트롤을 사용하기위한 스크립트-->

    <script type="text/javascript" src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=6.3"></script>



    <script type="text/javascript">

    var map = null;



    function GetMap() {

    map = new VEMap('myMap');



    // Bing Maps Key 정보가 올바르지 않을때 처리할 핸들러 등록

    map.AttachEvent("oncredentialserror", MyHandleCredentialsError);



    // 단계1에서 생성한 Bing Maps Key를 입력합니다.

    map.SetCredentials("Bing Maps Key");



    // Bing Maps로드하기

    map.LoadMap();

    }



    // 입력한 Bing Maps Key가 올바르지 않을 경우 메시지를 보여줍니다.

    function MyHandleCredentialsError() {

    alert("The credentials are invalid.");

    }

    </script>



    </head>



    <body onload="GetMap();">

    <!-- Bing Maps 를 보여줄 영역-->

    <div id='myMap' style="position:relative; width:600px; height:400px;"></div>

    </body>

    </html>
  2. 작성한 코드를 ‘HelloBingMaps.html’ 이라는 이름으로 저장합니다.

  3. 저장한 HelloBingMaps.html 파일을 마우스 왼쪽 버튼으로 두 번 클릭합니다.

  4. 다음과 같이 웹 브라우저에서 지도가 보여지는 것을 확인할 수 있습니다.
    그림 축소그림 확대
    2268279


단계 3: Bing Maps의 세부 속성 설정하기

단계 2에서 간단히 JavaScript를 이용하여 웹 페이지에 Bing Maps 지도를 보여주는 방법에 대해 알아보았습니다. Bing Maps를 이용하면 기본 지도형태 외에도 3차원 지도, 항공 지도, 확대/축소율 지정 등 세부 속성을 지정할 수 있습니다.

단계 2의 예제에서는 LoadMap 메소드 호출 시 아무런 인자를 전달하지 않았습니다. 이 경우 각 인자 값은 기본값을 이용하여 지도를 표시합니다.

VEMap 클래스의 LoadMap 메소드를 호출할 때 다음과 같은 인자들을 추가적으로 전달할 수 있습니다.

각 인자들에 대한 세부 정보는 http://msdn.microsoft.com/en-us/library/bb412546.aspx 문서를 참고하십시오.

VEMap.LoadMap(

VELatLong, // 좌표를 의미하는 VELatLong 클래스 객체

zoom, // 확대율(1-19). 기본값은 4

style, // 지도 스타일. VEMapStyle 열거형 참조

fixed, // 사용자가 지도 형태를 변경할 수 있는지 여부

mode, // 2D나 3D 모드 등을 지정함. VEMapMode 열거형 참조

showSwitch, // 지도상에 대시보드를 보여줄 것인지의 여부

tileBuffer, // 지도를 로드할 때 얼마만큼의 타일 버퍼를 사용할 것인지. 기본값은 0

mapOptions // 기타 지도 옵션들. VEMapOptions 클래스 참조


이제 예제를 통하여 지도의 세부 속성을 지정하는 방법을 알아보겠습니다.
  1. 단계 2에서 작성했던 GetMap( ) 함수의 소스 코드를 다음과 같이 수정합니다.

    function GetMap() {

    map = new VEMap('myMap');



    // Bing Maps Key 정보가 올바르지 않을때 처리할 핸들러 등록

    map.AttachEvent("oncredentialserror", MyHandleCredentialsError);



    // 단계2에서 생성한 Bing Maps Key를 입력합니다.

    map.SetCredentials("Bing Maps Key");



    // Bing Maps 로드하기

    map.LoadMap( new VELatLong(47.6, -122.33), 15, VEMapStyle.Birdseye, false );
  2. 수정된 소스 코드를 저장한 후 웹 브라우저에서 변경된 내용을 확인합니다.

  3. 다음과 같이 Bird’s eye 뷰 형태로 특정 지역의 거리가 지도상에 보여지는 것을 확인할 수 있습니다.
    그림 축소그림 확대
    2268280

추가 정보

Bing Maps를 사용하는 방법에 대한 보다 자세한 내용은 http://msdn.microsoft.com/en-us/library/bb429619.aspx 문서를 참고하십시오.

의견 보내기

표 축소표 확대
그림 축소그림 확대
의견 보내기
Microsoft 고객지원 사이트에서는 고객님의 소리를 귀담아 듣습니다. 아래 의견 보내기로 소중한 의견 보내주시기 바랍니다.

속성

기술 자료: 2268264 - 마지막 검토: 2014년 5월 23일 금요일 - 수정: 1.5
본 문서의 정보는 다음의 제품에 적용됩니다.
  • Live Search Maps
키워드:?
kbstepbystep kbhowto KB2268264

피드백 보내기

 

Contact us for more help

Contact us for more help
Connect with Answer Desk for expert help.
Get more support from smallbusiness.support.microsoft.com