구글 MAP API 분석 ...

Language/javascript

구글 MAP API 분석 ...

천본앵 2010. 4. 15. 11:18

구글 MAP API 분석

구글 MAP API는 JavaScript로 제어된다. 여기에서는 완전한 형태의 HTML 파일을 보여주지는 않을 것이다. 완전한 HTML 페이지를 만드는건 Map Key를 생성할 때 만들어지는 HTML 코드를 이해하는 것만으로 충분할 것이다.

한국은 위성사진만 제공하고 있어서, 부득이하게 일본과 미국 지도를 가지고 테스트했다.

3.1 기본

구글 Map을 불러오기 위한 가장 기본이 되는코드다. 서울주변을 보여준다.

var map = new GMap2(document.getElementById("map"));

map.setCenter(new GLatLng(36.615527631349245, 127.353515625), 4);

setCenter을 이용해서 보여줄 위치를 지정한다. 첫번째 인자는 좌표를 지정하기 위해서 사용한다. 두번째 인자는 지도의 해상도를 결정하기 위해서 사용한다. 숫자가 클 수록 더 자세한 결과를 보여준다.
[http]

simple.html 예제

구글 맵은 맵, 위성, 합성의 3가지 모드를 제공된다. setMapType메서드를 이용하면 모드를 변경할 수 있다. 따로 지정하지 않을 경우 맵모드로 실행된다.

setMapType(G_SATELLITE_TYPE) : 위성모드
setMapType(G_HYBRID_TYPE) : 합성모드

3.2 Map에서의 이동

다음은 맵에서 중심을 이동하는 예제다. panTo 메서드를 이용하면 해당 중심으로 지도를 부드럽게 이동시킨다. 길찾기등의 기능구현에 유용하게 사용할 수 있을 거 같다.

var map = new GMap2(document.getElementById("map"));

map.setCenter(new GLatLng(36.615527631349245, 127.353515625), 4);

window.setTimeout(function() {

map.panTo(new GLatLng(42.615527631349245, 128.353515625));}, 2000);

animate.html 예제

3.3 Control 버튼 추가하기

맵을 확대기시커나 모드를 바꾸거나 하는등의 제어를 위한 컨트롤 버튼을 추가한다.

var map = new GMap2(document.getElementById("map"));

map.addControl(new GSmallMapControl());

map.addControl(new GMapTypeControl());

map.setCenter(new GLatLng(36.615527631349245, 127.353515625), 4);

control.html 예제

3.4 Event Listener

event listener는 GEvent.addListener를 호출해서 생성한다. 이것은 맵에서 발생하는 이벤트를 알려준다. 아래의 예제에서 맵을 움직일 경우 변경된 좌표가 출력되는걸 확인할 수 있을 것이다.

var map = new GMap2(document.getElementById("map"));

GEvent.addListener(map, "moveend", function() {

var center = map.getCenter();

document.getElementById("message").innerHTML = center.toString();});

map.addControl(new GSmallMapControl());

map.addControl(new GMapTypeControl());

map.setCenter(new GLatLng(36.615527631349245, 127.353515625), 4);

event.html 예제

3.5 정보창 열기

openInfoWindow를 이용하면 원하는 지역에 DOM정보를 출력할 수 있다. 다음은 맵중앙에 저는 여기에 살아요메시지를 출력하는 코드다.

map.setCenter(new GLatLng(36.615527631349245, 127.353515625), 4);

map.openInfoWindow(map.getCenter(),document.createTextNode("저는 여기에 살아요"));

infowindow.html 예제

3.6 맵에 표시하기

이번 예제는 overlay기능을 이용해서 지도에 랜덤하게 10개의 마크를 표시한다. 마크에 사용되는 이미지는 기본 이미지이며, 사용자 정의 아이콘을 만들 수도 있다. 우리나라는 아직 상세지도가 제공되지 않은 관계로 일본의 동경시를 기준으로 예제를 만들었다.

map.setCenter(new GLatLng(35.76873101871279, 139.5413875579834), 12);

var bounds = map.getBounds();

var southWest = bounds.getSouthWest();

var northEast = bounds.getNorthEast();

var lngSpan = northEast.lng() - southWest.lng();var latSpan = northEast.lat() - southWest.lat();// 랜덤 포인트를 만들고 각각의 포인트에 마킹을 한다.for (var i = 0; i < 10; i++) {  var point = new GLatLng(southWest.lat() + latSpan * Math.random(),                          southWest.lng() + lngSpan * Math.random());  map.addOverlay(new GMarker(point));}// 랜덤 포인트를 만들고 이것을 연결한다. var points = [];for (var i = 0; i < 5; i++) {  points.push(new GLatLng(southWest.lat() + latSpan * Math.random(),                          southWest.lng() + lngSpan * Math.random()));}points.sort(function(p1, p2) {  return p1.lng() - p2.lng();});map.addOverlay(new GPolyline(points));

overlay.html 예제

3.7 클릭 이벤트 제어

맵에 클릭을 할경우 이벤트를 받아서 마킹을 하는 예제다. 앞서 배웠던 addListenr메서드를 이용해서 click 이벤트를 기다리고, 클릭이 발생하면 addOverlay메서드를 이용해서 마킹을 한다.

map.addControl(new GSmallMapControl());

map.addControl(new GMapTypeControl());

map.setCenter(new GLatLng(35.76873101871279, 139.5413875579834), 12);

GEvent.addListener(map, "click", function(marker, point) {  if (marker)   {

map.removeOverlay(marker);  } else {    map.addOverlay(new GMarker(point));  }});

click.html 예제

3.8 마커에 정보 창 출력하기

10개의 마커를 랜덤하게 표시하고, 마커를 클릭하면 클릭이벤트에 대한 Listener가 작동하도록 해보자. Listener 함수는 openInfoWindowHtml메서드를 이용해서 정보창을 출력한다.

var map = new GMap2(document.getElementById("map"));

map.addControl(new GSmallMapControl());

map.addControl(new GMapTypeControl());

map.setCenter(new GLatLng(35.76873101871279, 139.5413875579834), 12);

function createMarker(point, number) {  var marker = new GMarker(point);

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

marker.openInfoWindowHtml("Marker #<b>" + number + "</b>");  });  return marker;}

var bounds = map.getBounds();var southWest = bounds.getSouthWest();

var northEast = bounds.getNorthEast();

var lngSpan = northEast.lng() - southWest.lng();

var latSpan = northEast.lat() - southWest.lat();for (var i = 0; i < 10; i++) {

var point = new GLatLng(southWest.lat() + latSpan * Math.random(),

southWest.lng() + lngSpan * Math.random());  map.addOverlay(createMarker(point, i + 1));}

markerinfo.html 예제

3.9 탭 사용하기

openInfoWindowsTabs메서드 와 GInfoWindowTab 클래스를 이용하면, 탭을 제어할 수 있다. 다음 예제는 마커를 클릭하면 2개의 tab을 가진 Info Windows를 띄운다.

var map = new GMap2(document.getElementById("map"));

map.addControl(new GSmallMapControl());

map.addControl(new GMapTypeControl());

map.setCenter(new GLatLng(35.76873101871279, 139.5413875579834), 12);

var infoTabs = [    new GInfoWindowTab("탭1", "안녕하세요.<br><img src=http://www.joinc.co.kr/images/joinc.png border=0>"),    new GInfoWindowTab("탭2", "반갑습니다."),];

var marker = new GMarker(map.getCenter());

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

marker.openInfoWindowTabsHtml(infoTabs);});

map.addOverlay(marker);marker.openInfoWindowTabsHtml(infoTabs);

tab.html 예제

3.10 사용자 정의 아이콘 사용하기

사용자 정의 아이콘을 사용하는 예제다. 아이콘은 구글에서 제공하는 mini marker이미지들을 사용하기로 했다. 완전한 사용자 정의 아이콘을 만들기 위해서는 원본이미지와 함께 그림자 이미지가 쌍으로 준비되어야 한다.

var map = new GMap2(document.getElementById("map"));

map.addControl(new GSmallMapControl());

map.addControl(new GMapTypeControl());

map.setCenter(new GLatLng(35.76873101871279, 139.5413875579834), 12);

var icon = new GIcon();

icon.image = "http://labs.google.com/ridefinder/images/mm_20_red.png";icon.shadow = "http://labs.google.com/ridefinder/images/mm_20_shadow.png";icon.iconSize = new GSize(12, 20);icon.shadowSize = new GSize(22, 20);icon.iconAnchor = new GPoint(6, 20);icon.infoWindowAnchor = new GPoint(5, 1);// 10개의 랜덤위치를 찾아서 marking한다.

var bounds = map.getBounds();

var southWest = bounds.getSouthWest();

var northEast = bounds.getNorthEast();

var lngSpan = northEast.lng() - southWest.lng();

var latSpan = northEast.lat() - southWest.lat();

for (var i = 0; i < 10; i++) {    var point = new GLatLng(southWest.lat() + latSpan * Math.random(),                      southWest.lng() + lngSpan * Math.random());map.addOverlay(new GMarker(point, icon));}

icon.html 예제

3.11 아이콘 클래스 사용하기

지도서비스를 하게 된다면, 여러개의 아이콘들이 사용될 것이다. GIcon클래스를 이용하면 아이콘을 쉽게 관리할 수 있다.

var map = new GMap2(document.getElementById("map"));map.addControl(new GSmallMapControl());map.addControl(new GMapTypeControl());map.setCenter(new GLatLng(37.4419, -122.1419), 13);// 아이콘에서 사용할 이미지/그림자 이미지, Info Windows등 객체의 // 속성을 결정한다.var baseIcon = new GIcon();baseIcon.shadow = "http://www.google.com/mapfiles/shadow50.png";baseIcon.iconSize = new GSize(20, 34);baseIcon.shadowSize = new GSize(37, 34);baseIcon.iconAnchor = new GPoint(9, 34);baseIcon.infoWindowAnchor = new GPoint(9, 2);baseIcon.infoShadowAnchor = new GPoint(18, 25);function createMarker(point, index) {  // Create a lettered icon for this point using our icon class  var letter = String.fromCharCode("A".charCodeAt(0) + index);  var icon = new GIcon(baseIcon);  icon.image = "http://www.google.com/mapfiles/marker" + letter + ".png";  var marker = new GMarker(point, icon);  GEvent.addListener(marker, "click", function() {    marker.openInfoWindowHtml("지역 <b>" + letter + "</b>");  });  return marker;}var bounds = map.getBounds();var southWest = bounds.getSouthWest();var northEast = bounds.getNorthEast();var lngSpan = northEast.lng() - southWest.lng();var latSpan = northEast.lat() - southWest.lat();for (var i = 0; i < 10; i++) {  var point = new GLatLng(southWest.lat() + latSpan * Math.random(),                          southWest.lng() + lngSpan * Math.random());  map.addOverlay(createMarker(point, i));}

iconclass.html 예제

3.12 마커 드래그

마커는 클릭, 다른장소로의 드래그 등이 가능한 상호작용하는 객체다. 이 예제는 맵에서 마커를 클릭하고 드래그하는 이벤트를 처리하는 방법을 알려준다. 드래그는 click, dragstart, drag, dragend의 4가지 타입의 이벤트를 발생한다.

    var map = new GMap2(document.getElementById("map"));    var center = new GLatLng(37.51025350131836, 127.06023216247559);    map.setCenter(center, 16);    map.setMapType(G_SATELLITE_MAP);    var marker = new GMarker(center, {draggable: true});    GEvent.addListener(marker, "dragstart", function() {        map.closeInfoWindow();    });    GEvent.addListener(marker, "dragend", function() {        map.openInfoWindowHtml("여기를 약속장소로...");     });    map.addOverlay(marker);}

drag.html 예제

3.13 SideBar를 통한 맵 링크

google map에서 검색을 해보면 지도 옆에 SideBar를 통해서 맵을 제어하는 걸 볼수 있다. 여기에서는 SideBar를 이용해서 map을 제어하는 방법에 대해서 알아보겠다.

우선 셈플을 테스트해보도록 한다.
[http]

sidebar.html 예제

<script language="JavaScript" type="text/javascript">    // 이 변수에 side bar에 이벤트가 발생했을 때 출력할 HTML코드가 저장된다.    var side_bar_html = "";    // side bar에는 여러개의 마커에 대한 HTML요소가 사용되므로    // 배열로 정의 한다.     var gmarkers = [];    var htmls = [];    var i = 0;    // marker을 만든다.     // 첫번째 인자는 위치, 두번째 인자는 이름, 세번째 인자는 설명이다.    function createMarker(point, name, html)    {        var marker = new GMarker(point);        // click 이벤트에 대한 listener 함수 정의        GEvent.addListener(marker, "click", function()         {            marker.openInfoWindowHtml(html);        });        gmarkers[i] = marker;        htmls[i] = html;        side_bar_html += '<a href="javascripｔ:myclick(' + i + ')">' + name + '</a><br>';        i++;        return marker;    }    function myclick(i)    {        gmarkers[i].openInfoWindowHtml(htmls[i]);    }    var map = new GMap2(document.getElementById("map"));    // GSmallMapControl대신에 GLargeMapControl을 사용했다.    map.addControl(new GLargeMapControl());    map.addControl(new GMapTypeControl());    map.setCenter(new GLatLng(37.51030456483467, 127.05190658569336),14);    map.setMapType(G_SATELLITE_MAP);    // 테스트에 사용할 marker를 만든다.     var point = new GLatLng(37.508500299402435, 127.06263542175293);    var marker = createMarker(point, "반디엔 루인스", "제가 애용하는 서점 입니다");    map.addOverlay(marker);    var point = new GLatLng(37.50209991181568, 127.03652143478394);    var marker = createMarker(point, "시티문고", "가끔 강남에 갈일이 있으면 시간을 때우는 장소로..");    map.addOverlay(marker);    var point = new GLatLng(37.517802011991854, 127.0405125617981);    var marker = createMarker(point, "로터리 오락실", "드럼메니아 V2때문에 갑니다");    map.addOverlay(marker);    var point = new GLatLng(37.5056235973398, 127.0512306690216);    var marker = createMarker(point, onnet", "제가 다니는 회사지요");    map.addOverlay(marker);    // <div> side_bar에 side_bar_html 문서를 배치한다.    document.getElementById("side_bar").innerHTML = side_bar_html;</script>

4 XML과 비동기 HTTP를 이용한 지도 생성

이번 예제는 경도/위도와 지역정보를 포함한 data.xml을 다운로드 받아서, 지도에 마커를 표시한다. GDownloadUrl메서드를 이용해서 파일을 다운로드 받을 수 있다. 다운로드 받은 XML파일은 GXml메서드를 이용해서 처리한다. 마커를 클릭하면 지역정보가 표시된다.

<script language="JavaScript" type="text/javascript">function load() {    var map = new GMap2(document.getElementById("map"));    var center = new GLatLng(37.51030456483467, 127.05190658569336);    map.addControl(new GSmallMapControl());    map.addControl(new GMapTypeControl());    map.setCenter(center, 14);    map.setMapType(G_SATELLITE_MAP);    function createMarker(point, name)    {        var marker = new GMarker(point);        GEvent.addListener(marker, "click", function()         {            marker.openInfoWindowHtml("<b>" + name + "</b>");        });        return marker;    }    GDownloadUrl("data.xml", function(data, responseCode)     {        var xml = GXml.parse(data);        var markers = xml.documentElement.getElementsByTagName("marker");        for (var i = 0; i < markers.length; i++)         {            var point = new GLatLng(parseFloat(markers[i].getAttribute("lat")),                            parseFloat(markers[i].getAttribute("lng")));            map.addOverlay(new GMarker(point));            map.addOverlay(createMarker(point, markers[i].getAttribute("name")));        }    });}

다음은 data.xml의 내용이다.

<markers><marker lat="37.508500299402435" lng="127.06263542175293" name="반디앤 루인스"/><marker lat="37.50209991181568" lng="127.03652143478394" name="시티문고"/><marker lat="37.50312128705489" lng="127.05825805664062" name="개미책방"/><marker lat="37.517802011991854" lng="127.0405125617981" name="로터리오락실"/><marker lat="37.5056235973398" lng="127.0512306690216" name="울회사"/></markers>

# by 쫑이® | 2007/07/04 16:49 | 트랙백 | 덧글(0)