구글맵을 이용해서 웹페이지에 지도를 넣어보자

1

구글의 많은 서비스들은 개발자가 접속할 수 있도록 오픈 API를 제공하고 있습니다. 이 것을 소위 웹2.0이라고도 하는데, 구글맵에서 제공하는 API를 가지고 웹페이지에 지도를 넣어보도록 하겠습니다. 이리 말하지만, 매우 쉽습니다.

구글맵은 미국과 캐나다에서 서비스를 하고 있고, 다른 국가에서는 위성지도를 주로 서비스하고 있습니다. 다만, 한국과는 틀리게 일본에선 지리정보데이터를 넣고 있는 것이 확인되었습니다.

구글맵에 나타난 한국과 일본

지리정보데이터가 입력되어 있으면 구글맵의 세가지 모드 즉 위성사진모드, 지도모드, 그리고 하이브리드모드로 볼 수 있고, 위치설명도 있기 때문에 매우 간편하게 사용할 수 있게 됩니다.

그럼, 웹페이지에 구글맵을 넣어보도록 하겠습니다.

1. 구글맵의 API를 얻자.

구글의 API 페이지의 구글맵으로 가서 “Sign up for a Google Maps API key”를 클릭하고, 넣을 페이지의 URL을 입력하면 API 키, 사용해도 좋을 URL 그리고 예제 HTML코드 이렇게 세가지 정보가 나오게 됩니다.
주의할 점은 제공되는 키는 입력한 도메인에서만 사용 가능하므로, 도메인이 바뀔 경우 다른 키를 발급받아야 합니다.

구글맵의 API 얻는 화면

2. 주어진 예제 코드를 수정하자.

올바르게 입력했다면 여러분은 다음과 같은 코드를 얻을 것입니다.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="http://maps.google.com/maps?file=api&v=1&key=[API키]" type="text/javascript"></script>
</head>
<body>
<div id="map" style="width: [가로픽셀수]px; height: [세로픽셀수]px"></div>
<script type="text/javascript">
//<![CDATA[

var map = new GMap(document.getElementById("map"));
map.addControl(new GSmallMapControl());
map.centerAndZoom(new GPoint([가로위치좌표], [세로위치좌표]), 4);

//]]>
</script>
</body>
</html>

위의 코드에서 수정해야 할 것은 가로와 세로픽셀수 그리고 가로위치좌표와 세로위치좌표 입니다.
적당한 크기로 픽셀수를 수정하고, 다음과 같은 방법으로 원하는 지역의 좌표값을 얻습니다.

원하는 지역 좌표값 얻기

  1. 구글맵에 접속해서 원하는 지역이 나오도록 지도를 움직여 줍니다. 수도권일 경우 “seoul”로 검색한 후 마우스로 조정을 하면 됩니다.
  2. 원하는 지역이 대충 나왔다면 정확한 지역을 더블클릭해 줍니다. 그러면 그 지역이 정가운데로 오게 됩니다.
  3. 위와 같이 한 후 지도 최상단의 오른쪽에 있는 “Link to this page”라는 링크를 클릭하면 주소창의 주소가 바뀌는데, 주소 중에 ll= 다음에 나오는 값이 좌표값입니다. 이 두개의 좌표값을 앞뒤를 바꾸어서 위의 코드에 넣어주면 됩니다.

3. 수정한 코드를 웹페이지에 넣자.

워드프레스에서 자바스크립트 코드를 작성할 방법이 없어서 따로 링크를 겁니다. 확인하실 분은 클릭하세요.

위의 작업으로 수정한 지도는 다음과 같습니다.

커스터마이징 한 구글맵

About Author

구글 전문 블로그 "팔글-인사이드 구글"을 2003년 부터 운영했으며, 애드센스와 유사한 애드얼라이언스의 기획&개발에 참여한 바 있다. IT 기업들의 생태계에 대해 관심이 많으며, 광고, 디지털 콘텐츠 판매 등 여러가지 실험을 진행하고 있다.

1 Comment

  1. map 말고 satellite나 hybrid로 띄울려고 하는데요.. 잘 안되서요..
    소스를 어떻게 해야하는 건지../?

하나의 댓글은 블로그를 풍성하게 만들 수 있습니다 :)