지도의 대명사 구글 지도의 API의 버전이 2에서 3로 올라갔다. 모바일 장치에 대한 지원이 강화된 것으로 보인다.
※ v3부터는 API Key가 필요 없습니다.
아래는 구글 사이트에 소개된 가장 간단한 예이다. 지정한 위치를 중심으로 한 지도가 표시된다.
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=set_to_true_or_false"></script>
<script type="text/javascript">
function initialize() {
var latlng = new google.maps.LatLng(-34.397, 150.644);
var myOptions = {
zoom: 8,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
}
</script>
</head>
<body onload="initialize()">
<div id="map_canvas" style="width:100%; height:100%"></div>
</body>
</html>
- javascript 파일을 포함하고
- 페이지를 로딩한 후에
- google.maps.Map 객체를 생성하면
- 지정한 <div>에 지도가 표시된다.
주의할 점은 <div> 속성 안에 width와 height를 포함해야 한다는 것이다. CSS 등으로 지정하면 크기를 알 수 없는 문제가 있기 때문이다.
지도 종류 4가지
옵션을 지정할 때 mapTypeId에 다음의 하나를 지정한다.
- google.map.MapTypeId.ROADMAP : 지도
- google.map.MapTypeId.SATELLITE : 위성
- google.map.MapTypeId.HYBRID : 하이브리드
- google.map.MapTypeId.TERRAIN : 지형
런타임에 변경하기 위해서는 setMapTypeId() 함수를 호출한다.
Event 처리
구글 맵은 javascript의 일반적인 이벤트 처리와 유사하게 addListener라는 함수를 제공한다. 거기에 원하는 이벤트를 등록하면 된다. 간단한 지도 보기에 이벤트를 다음과 같이 추가할 수 있다.
google.maps.event.addListener(map, 'zoom_changed', function() {
setTimeout(moveToDarwin, 1500);
});var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title:"Hello World!"
});
google.maps.event.addListener(marker, 'click', function() {
map.setZoom(8);
});
}function moveToDarwin() {
var darwin = new google.maps.LatLng(-12.461334, 130.841904);
map.setCenter(darwin);
}
google.maps.event.addListener()를 사용해서 이벤트를 추가하게 된다. ‘zoom_changed’, ‘click’ 등의 이벤트는 구글 맵에서 정의한 이벤트가 된다.
위의 예는 zoom이 변경이 되면 1.5초 후에 특정 지역으로 이동하는 이벤트 처리와 marker를 클릭하면 zoom 배율을 8로 변경하게 되어 있다. 배율이 8이 아닌 상태에서 marker를 클릭하면 배율이 8로 변경이 되면서 다시 zoom_changed 이벤트가 발생하여 특정 지역으로 이동까지 하게 된다.
지도의 위치 변화에 따른 처리를 하기 가장 좋은 방법은 구글 문서에 따르면 ‘bounds_changed’와 getBounds()를 같이 사용하는 것이라고 한다. ‘zoom_changed’와 ‘center_changed’를 사용하는 것은 이 경우에 getBounds() 값을 정확히 얻기 힘들 수 있다고 한다.
※ Polygon의 내부를 ‘click’한 경우에도 이벤트를 받을 수 있다.
클릭과 같은 UI 이벤트에 대해서는 인자로 위치를 받을 수 있다. 다음은 클릭을 한 곳에 marker를 추가하는 예이다.
…
google.maps.event.addListener(map, 'click', function(event) {
placeMarker(event.latLng);
});
…
function placeMarker(location) {
var clickedLocation = new google.maps.LatLng(location);
var marker = new google.maps.Marker({
position: location,
map: map
});
Controls
지도 종류 변경, 확대/축소 등의 제어 요소를 수정할 수 있다. 옵션에 다음을 설정할 수 있다.
- mapTypeControlOptions
- navigationControlOptions
- scaleControlOptions
예제는 다음과 같다.
function initialize() {
var myOptions = {
zoom: 12,
center: new google.maps.LatLng(-28.643387, 153.612224),
mapTypeId: google.maps.MapTypeId.ROADMAP,
mapTypeControl: true,
mapTypeControlOptions: {
style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR,
position: google.maps.ControlPosition.BOTTOM
},
navigationControl: true,
navigationControlOptions: {
style: google.maps.NavigationControlStyle.ZOOM_PAN,
position: google.maps.ControlPosition.TOP_RIGHT
},
scaleControl: true,
scaleControlOptions: {
position: google.maps.ControlPosition.TOP_LEFT
}
}
var map = new google.maps.Map(document.getElementById("map_canvas"),
myOptions);
}
Overlay
지도 위에 다음과 같은 다양한 것을 표시할 수 있다.
- Marker : 한 점의 위치를 가리키는데 사용한다.
- Icon : 기본 marker를 원하는 아이콘으로 그릴 수 있다.
- Polyline
- Polygon : ‘click’ 이벤트도 받을 수 있다.
- Ground Overlays : 이미지를 그릴 수 있다.
- Info Windows : 말 풍선처럼 생긴 것. 텍스트와 HTML을 포함할 수 있다.
- KML layer : Google earth에서 지원하는 KML 파일을 읽어서 표시할 수 있다.
- GeoRSS layer : 위치 정보를 저장하고 있는 GeoRSS를 읽어 들일 수 있다. Flickr에서 지원한다.
Geocoding
위도,/경도로부터 주소를, 주소로부터 위도/경도를 얻는데 사용한다.