6. 구글맵 API를 이용한 간단한 예제

이제까지 정리한 구글맵 API마우스 위치 얻는 방법을 이용해 간단한 예제를 하나 만들어 보자 예제의 전체 소스는 아래와 같다. =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=
[CODE type=javascript]
<HTML>
<HEAD>
<script src="http://maps.google.com/maps?file=api&v=2&key=구글맵에서받은자신의키를넣는다" type="text/javascript">
</script>
<SCRIPT LANGUAGE="JavaScript">
<!--

  var map;
  var isIE;
  var eventValue;
  var state;

  function checkIE()
  {
     if (navigator.appName == "Microsoft Internet Explorer")
         isIE = true;
     else
         isIE = false;
  }

  function startMouseCapture(objCapture)
  {
     if ( isIE == true )
         objCapture.setCapture();
  }

  function endMouseCapture(objCapture)
  {

     if ( isIE == true )
     {
         objCapture.releaseCapture();
     }

     hideMap();

  }

  function SaveMouseEvent(e)
  {
     eventValue = e;
  }

  function initMouseCapture()
  {
    checkIE();

    if (isIE == false)
    {
        document.addEventListener('mousemove',SaveMouseEvent,false);
    }
  }

  function createMarker(point, msg)
  {
   var marker = new GMarker(point);
   GEvent.addListener(marker, "click", function() {
     marker.openInfoWindowHtml("Message: <b>" + msg + "</b>");
   });
   return marker;
  }

  function showMap(a, b, msg)
  {
     var x, y;

     if ( isIE == false )
     {
         x = eventValue.pageX;
         y = eventValue.pageY;
     }
     else
     {
         x = event.x;
         y = event.y;
     }

     var divLayer = document.getElementById('gmap');
     var latLng = new GLatLng(a, b);

     divLayer.style.display='';
     divLayer.style.left = x + 1;
     divLayer.style.top = y + 1;

     if ( map )
     {
         map.panTo(latLng);

         map.clearOverlays();
         var point = map.getCenter();
         map.addOverlay(createMarker(point, msg));
     }
     else
     {
         map = new GMap2(divLayer);
         map.setCenter( new GLatLng(a, b), 13);
         map.disableDragging();
         map.setMapType(G_SATELLITE_MAP);

         var point = map.getCenter();
         map.addOverlay(createMarker(point, msg));
     }

  }


  function hideMap()
  {
     var divLayer = document.getElementById('gmap');
     divLayer.style.display='none';
  }

//-->
</SCRIPT>
</HEAD>

<BODY onload="initMouseCapture();">

<div id=bg>
  집 : 의정부 <img id=1 src="/images/map.gif" onmouseover="startMouseCapture(this);" onmouseout="endMouseCapture(this);"onmousemove="showMap(37.725447,127.053452, '우리집')"><br>
  직장 : <A HREF="http://www.wincom.co.kr" target="_blank">윈컴</A> <img id=2 src="/images/map.gif" onmouseover="startMouseCapture(this);" onmouseout="endMouseCapture(this);" onmousemove="showMap(37.479762,126.882563, '윈컴')"><br>
  파견 : <A HREF="http://www.feelingk.com" target="_blank">필링크</A> <img id=3 src="/images/map.gif" onmouseover="startMouseCapture(this);" onmouseout="endMouseCapture(this);" onmousemove="showMap(37.484462,126.894665, '필링크')"><br>
</div>

<div id="gmap" style="display:none; width:400px; height:300px; position:absolute;"></div>
</BODY>
</HTML>
[/CODE]
=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=
이제까지의 내용을 기본으로 한 소스이기 때문에 내용이 어렵지 않을 것이다. 소스에 대한 별도의 설명을 하지 않겠다. 실행 결과는 아래와 같다. 최초 화면은 아래와 같다.
 


MAP이라는 이미지 위에 마우스를 올려 놓은 결과는 아래와 같다.

불행이도 예제로 사용한 곳이 모두 세부 위성사진이 제공 하지 않는 지점이였다.
( 저와 관련 있는 장소들이 다 이렇네요.. ㅡㅡ; )

이상으로 구글맵 API에 관한 내용을 마무리 하겠습니다.

덧글, 이 예제를 만드는데, 한참 삽질 했네요. IE에서는 정상적으로 동작을 하는데, FF에서 자꾸 hideMap()함수가 호출되는 것입니다. 한참을 삽질하다가 결과 레이어가 현재 마우스 포인터와 같아서 onmouseover이벤트와 onmouseout이벤트가 계속 일어나는 것이였네요, 결과 레이어 좌표를 +1 해주고 간단히 해결 했습니다.

5. 맵에 마크 하기 & 이벤트 처리

이번엔 종로에 마크를 하나 하고 ( 핀셋 모양의 아이콘을 찍는 효과이다) 그 마크가 클릭되면 간단한 메시지를 출력해 보자. 이벤트 처리를 위해 함수를 하나 추가 하자.

[CODE type="javascript"]
   function createMarker(point, msg) {

     var marker = new GMarker(point);

     GEvent.addListener(marker, "click", function() {

       marker.openInfoWindowHtml("Message: <b>" + msg + "</b>");

     });

     return marker;

   }
[/CODE]

일단 GMaker를 하나 만들고, 만든 GMaker객체에 이벤트 리스너를 하나 등록한다. 이벤트는 click이벤트이고, 실행할 함수역시 파라미터에 직접 넣었다. 이렇게 파라미터에 직접 넣은 것은 가독성을 떨어트리는 방법이라 필자가 좋아하는 방법은 아니지만, 구글맵API 문서에 예제를 활용하다 보니 그렇게 되었다..^^; 클릭 이벤트가 발생하면 마크에 InfoWindow라는 것을 열어 보여준다. 이 InfoWindow는 일반 pan에도 올릴 수가 있다. 하지만, 활용도 측면에서는 마커위에 올리는 방법이 더 좋다가 판단해서 여기서 그 방법은 설명하지 않겠다. 자세한 내용은 구글API 문서를 찾아 보기 바란다. 마크 표시를 위해 앞에서 작성한 예제의 displayGMap함수 마지막에 아래의 코드를 추가하자.

[CODE type="javascript"]
       map.clearOverlays();

       var point = map.getCenter();

       map.addOverlay(createMarker(point, "종로"));
[/CODE]

일단 기존의 Overlay들을 모두 삭제하고, 현재 맵의 중앙 좌표를 구하고, 그 중앙 좌표에 마크를 표시한다. 전체 소스는 아래와 같다.

[CODE type="javascript"]
<HTML>

<HEAD>

<script src="http://maps.google.com/maps?file=구글맵에서받은자신의키를넣는다" type="text/javascript">

</script>

<SCRIPT LANGUAGE="JavaScript">

<!--

   function createMarker(point, msg) {

     var marker = new GMarker(point);

     GEvent.addListener(marker, "click", function() {

       marker.openInfoWindowHtml("Message: <b>" + msg + "</b>");

     });

     return marker;

   }


   function displayGMap()

   {

       var divGMap = document.getElementById('gmap');

       var map = new GMap2(divGMap);

       map.setCenter( new GLatLng(37.570229,126.978178), 13);

       map.setMapType(G_SATELLITE_MAP);

       map.addControl(new GSmallMapControl());

       map.addControl(new GMapTypeControl());



       map.clearOverlays();

       var point = map.getCenter();

       map.addOverlay(createMarker(point, "종로"));

   }

//-->

</SCRIPT>

</HEAD>



<BODY onload="displayGMap();">



<div id="gmap" style="width:400px; height:300px;"></div>

</BODY>

</HTML>
[/CODE]

결과를 보면 처음엔 핀셋 모양의 아이콘이 pan중앙에 있고,
사용자 삽입 이미지
클릭하면 간단한 메시지 창이 표시되는 것을 볼 수 있다.
사용자 삽입 이미지
구글맵의 경우 케릭터셋이 UTF-8로 되어 있다. 테스트 예제를 작성하면서 EUC-KR로 작성을 했는데, 다행이 한글메시지도 정상적으로 출력이 되었다. 이렇게 원하는 기능은 모두 알아보았다. 다음엔 이제까지의 기능을 활용해 간단한 예제를 해보고 마무리 짇겠다.

4. 콘트롤을 올려보자.

이전 결과를 보면 너무 단조 롭다.

구글맵에서 보면 축소 확대도 가능하고,
맵 모드를 바꿀수도 있다.

이런 콘트롤 역시 각각 객체로 제공을 한다.

앞 예제의 displayMap함수 마지막에
아래의 코드를 넣어 보자.

[CODE type=javascript]
      map.addControl(new GSmallMapControl());
      map.addControl(new GMapTypeControl());
[/HTML][/CODE]


GMap2의 addControl이라는 메소드를 이용해 pan에 올릴 콘트롤 변수를 파라미터로 넘겨주면 된다.
예제에서는 구글맵에서 제공하는 콘트롤인 MapType, SmallMap두가지 콘트롤을 올렸다.

전체 소스는 아래와 같다.


[CODE type=javascript]
<HTML>
<HEAD>
<script src="http://maps.google.com/maps?file=api&v=2&key=구글맵에서받은자신의키를넣는다" type="text/javascript">
</script>
<SCRIPT LANGUAGE="JavaScript">
<!--

  function displayGMap()
  {
      var divGMap = document.getElementById('gmap');
      var map = new GMap2(divGMap);
      map.setCenter( new GLatLng(37.570229,126.978178), 13);
      map.setMapType(G_SATELLITE_MAP);
      map.addControl(new GSmallMapControl());
      map.addControl(new GMapTypeControl());
  }

//-->
</SCRIPT>
</HEAD>

<BODY onload="displayGMap();">

<div id="gmap" style="width:400px; height:300px;"></div>
</BODY>
</HTML>
[/HTML][/CODE]


결과를 보면 이동/축소확대, 모드 변경이 가능하게 두개의 콘트롤이 올라가 있는 것을 확인 할 수 있다.
아직 우리나라의 경우 위성사진만을 제공하기 때문에 MapType콘트롤은 의미가 없어 보인다.



3. 간단한 구글 맵을 예제

구글은 자바스크립트와 html을 이용해 사용할 수 있다. html문서를 새로 하나 만들어 보자.
구글맵을 사용하기 위해서는 아래 코드를 반드시 넣어 줘야 한다.

[CODE type=javascript]
<script src="http://maps.google.com/maps?file=api&v=2&key=구글맵에서받은자신의키를넣는다" type="text/javascript">
</script>
[/HTML][/CODE]

이렇게 해줘야만, 구글맵에서 제공하는 객체들을 사용할 수가 있다.(너무 당연한가^^ㅋ)

그리고, html body안에 맵을 뿌려줄 영역을 만들어 줘야 한다.

[CODE type=javascript]
<div id="gmap" style="width:400px; height:200px;"></div>
[/HTML][/CODE]

gmap라는 div안에 현재는 아무런 내용이 없지만, 자바스크립트로 구글맵 API를 사용하면 동적으로 div안의 영역에 맵이 생성된다.

이제 실제 구글맵 API를 사용하는 자바스크립트 함수를 하나 만들자

[CODE type=javascript]
<SCRIPT LANGUAGE="JavaScript">
<!--

  function displayGMap()
  {
      var divGMap = document.getElementById('gmap');
      var map = new GMap2(divGMap);
      map.setCenter( new GLatLng(37.570229,126.978178), 13);
      map.setMapType(G_SATELLITE_MAP);
  }

//-->
</SCRIPT>
[/HTML][/CODE]

코드가 간단해 설명이 필요 할지 모르겠다.
document의 getElementById 메소드를 이용해 아까 만든 div영역 객체를 얻고,
GMap2라는 객체를 만들면서 생성자 파라미터로 넘긴다.
구글맵의 기본은 이 GMap2라는 객체로서 이 위에 콘트롤을 올린 다든지, 모드를 바꾼다 든지 하는 작업을 하면서 구글맵에서 제공하는 서비스 처럼 만들어 가는 것이다.

GMap2의 setCenter메소트의 파라미터로 GLatLng객체와 확대 비율을 넘긴다.
GLatLng객체는 생성자에서 위경도를 받아 바로 생성 했다.
예제에서 사용한 위경도는 광화문으로  이렇게 위경도를 알기 위해서는

http://maps.google.com/

에 들어가서 직접 찾아 가야 한다. 원하는 위치를 찾았으면,
오른쪽 상단의 Link to this page를 클릭하면 주소창에 위경도가 표시된다.
좀 무식한 방법이지만, 알맵의 위 경도와는 틀려서 이런 방법으로 위 경도를 찾았다.

GMap2의 setMapType메소드로 구글맵을 표시해 주는 모드를 바꾸는 것이다.
구글맵은 Map, Satellite, Hybrid 이렇게 세가지 모드를 지원한다.
Map는 간단한 그래픽으로 지도가 나타나는데, 불행이도 미국 지역만을 지원한다.
예제에서는 한국 맵을 보기 위해 위성사진 모드인 Satellite모드로 바꾸었다.

이제 이 함수를 부르는 부분을 넣자.

[CODE type=javascript]
<BODY onload="displayGMap();">
[/HTML][/CODE]

간단히 이렇게 body테그의 onload함수로 불렀다.

전체 소스를 보자

[CODE type=javascript]
<HTML>
<HEAD>
<scriptsrc="http://maps.google.com/maps?file=api&v=2&key=구글맵에서받은자신의키를넣는다" type="text/javascript">
</script>
<SCRIPT LANGUAGE="JavaScript">
<!--
  function displayGMap()
  {
      var divGMap = document.getElementById('gmap');
      var map = new GMap2(divGMap);
      map.setCenter( new GLatLng(37.570229,126.978178), 13);
      map.setMapType(G_SATELLITE_MAP);
  }
//-->
</SCRIPT>
</HEAD>
<BODY onload="displayGMap();">
  <div id="gmap" style="width:400px; height:300px;"></div>
</BODY>
</HTML>

[/HTML][/CODE]

코드가 정말 간단하다.
이렇게 간단한 코드만으로 구글맵의 기능을 사용할 수 있는 것이다.

2. 인증키를 받자.

다른 웹메소드를 사용해 보면 알겠지만, 구글 맵 역시 사용자 키를 받아 등록을 해야한다.
아직 등록을 하지 않았다면,

http://www.google.com/apis/maps/signup.html

이곳 에서 등록을 하면 된다.

간단한 등록 절차를 거치면 영숫자가 조합된 키를 받게되는데 구글맵API를 이용하기 위해서는 반드시 필요하다. 혹시 자신이 등록한 키를 잃어 버렸다해도 등록한 계정으로 로그인을 하면 자신의 키를 확인 할 수 있다.

1. 구글 맵 API란?

Google 에서 하는 여러 서비스 중에서 Google Map이란 서비스가 있다.
전세계 위성 사진을 볼 수 있는 서비스로서 Google의 다른 서비스와 마찬가지로,
API를 제공하여 개발자가 커스터마이징 하여 활용할 수 있는 방법을 마련해 놓았다.
현재는 2.x대 버전까지 발표한 상태로 여기서 DHTML을 이용한 간단한 활용법을 알아보자.

우리나라의 경우 서울 중심지등 일부 지역만 세부적인 위성 사진을 제공 하는 아쉬운 점이 있지만,
점점 제공하는 지역이 확대 되고 있으니, 기다려 보면 내가 살고 있는 곳의 자세한 위성 사진을 볼 수 있을 지도 모르겠다. 일단은, 재미삼아 한번 사용해 보자. ^^*

구글맵 API는 자바스크립트를 사용해 개발을 한다.
구글의 실력 좋은 개발자 들이 OOP로 구현을 너무 잘 해놔서, 사용 법도 간단한다.
필자 역시 수박 겉할기 식으로 한번 훌터봤을 뿐인데도, 원하는 기능을 구현 할 수 있었다.

http://www.google.com/apis/maps/documentation/

위에 링크로 가보면 자세한 구글맵 사용법이 나와 있다.
각 클래스 맴버 설명은 물론, 간단한 예제들까지 정말 자세히 나와있다.
일단 여기서는 꼭 필요한 몇몇 기능에 대한 설명만을 하겠다.
더 세부적인 사용법을 알고 싶으면 위의 URL을 참고 하기 바란다.


덧글,
예전 sqlce강좌를 홈페이지에 올렸던 적이 있습니다.
몇 년이 흐르고 웹서핑을 하다가 우연히 제가 만든 강좌가 다른 사람의 홈페이지에 올려져 있는것을 본적이 있습니다. 출처나 원문 링크같은 내용은 전혀 없이 알맹이만 쏙 빼갔더군요. ㅡ.ㅡ
뭐 저작권이니 이런것을 따지고 싶진 않습니다만, 혹시 퍼가시더라도, 출처 정도는 남겨주셨으면 좋겠습니다.
원문 주소는
http://newtype.pe.kr/category/it/gmap
이곳 입니다.