Google Maps API

본 내용은 http://www.joinc.co.kr/modules/moniwiki/wiki.php/Site/Google/Service/GoogleMapAPI 을 정리한 것입니다.

Google Map을 사용하기 위해서는 Map Key를 발급 받아야 합니다.
Key는 http://www.google.com/apis/maps 에서 받으실 수 있습니다.

Google Map은 우선 google Maps Javascript를 명시해야 합니다. 이때 발급 받은 Map Key를 적으시면 됩니다.

<script src="http://maps.google.co.kr/maps?file=api&v=2&key=abcdefg" type="text/javascript"></script>

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

var map = new GMap2(document.getElementById("map"));
map.setCenter(new GLatLng(36.615527631349245, 127.353515625), 4);

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

예제 : simple.html

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

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

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. 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


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


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

map.setCenter(new GLatLng(36.615527631349245, 127.353515625), 4);
map.openInfoWindow(map.getCenter(), document.createTextNode("저는 여기에 살아요"));

예제 : infowindow.html


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


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


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


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

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


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


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


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

// 이 변수에 side bar에 이벤트가 발생했을 때 출력할 HTML코드가 저장된다.
var side_bar_html = "";

// side bar에는 여러개의 마커에 대한 HTML요소가 사용될 수 있으므로
// 배열로 정의 된다.
var gmarkers = [];
var htmls = [];
var i = 0;
/*
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);
*/

function createMarker(point, name, html) {
	var marker = new GMarker(point);
	GEvent.addListener(marker, "click", function() {
		marker.openInfoWindowHtml(html);
	});
	gmarkers[i] = marker;
	htmls[i] = html;
	side_bar_html += '<a href="javascript:myclick(' + i + ')">' + name + '</a><br>';
	i++;
	return marker;
}

function myclick(i) {
	gmarkers[i].openInfoWindowHtml(htmls[i]);
}
var map = new GMap2(document.getElementById("map"));
map.addControl(new GLargeMapControl());
map.addControl(new GMapTypeControl());
map.setCenter(new GLatLng(37.51030456483467, 127.05190658569336),14);
map.setMapType(G_SATELLITE_MAP);

// 테스트에 사용할 point를 만들자.
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;

예제 : sidebar.html


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

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("async_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")));
		}
	});
}

다음은 async_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>

예제 : async.html


* 관련 링크
http://mapki.com
http://econym.org.uk/gmap/ -> 위의 예제가 거의다 이 사이트에 존재 합니다.


==================================================================================
* 예제 모음
Map Search Wizard - Put a Searchable Map on Your Web Page 는 쉽게 자신의 홈페이지에 Google Map을 달 수 있도록 코드를 생성해 줍니다.
SearchWizard.html