구글맵 API 이용하기. 3. 맵에 Control추가하기 예제
첫예제가 너무 쉽지 않았나...
그래서 너무 뽀대가 나질 않는다... 줌인,아웃도 않되고... 그냥... 지도다.
구글맵은 역시 줌인,아웃도 되야하고, 일반,위성,하이브리드 지도도 선택해서 볼수 있어야 하지 않겠는가...
.... 해보자.
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>Google Maps JavaScript API Example</title>
<script src="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAAEMxD5KuM40jmb4GJnPTkJRS7xOUxO1Ufu-uozDqsHa5hmERu-xQqyZ1M1nyRpJvaLV__GNN29EB0hQ"
type="text/javascript"></script>
<script type="text/javascript">
function load() {
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map"));
map.addControl(new GSmallMapControl());
map.addControl(new GMapTypeControl());
map.setCenter(new GLatLng(37.4419, -122.1419), 13);
}
}
</script>
</head>
<body onload="load()" onunload="GUnload()">
<div id="map" style="width: 500px; height: 300px"></div>
</body>
</html>
http://home.megapass.net/~l5027309/addcontrol.html
이건 링크고, 아래는 실행화면...
역시 소스를 뜯어보자
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>Google Maps JavaScript API Example</title>
<script src="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAAEMxD5KuM40jmb4GJnPTkJRS7xOUxO1Ufu-uozDqsHa5hmERu-xQqyZ1M1nyRpJvaLV__GNN29EB0hQ"
type="text/javascript"></script>
<script type="text/javascript">
function load() {
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map"));
소스가 너무 간단하지 않은가... 여기까지는 전예제와 동일하다. 설명생략.
map.addControl(new GSmallMapControl());
. 이넘은 만든 map 이란 넘한테서 컨트롤을 추가시키는 함수로
addControl(control,position?)으로 나타낸다. position이 없으면, control 위치가 position으로 지정된다.
GSmallMapControl()이넘은 네방향으로 움직이는 컨트롤과, 줌인,아웃 컨트롤을 만든다.
map.addControl(new GMapTypeControl());
. GMapTypeControl() 이 넘은 맵 타입을 지정하는 컨트롤을 만들수 있다. 맵상에는 Map, Satellite, Hybrid로 나타난다.
map.setCenter(new GLatLng(37.4419, -122.1419), 13);
}
}
</script>
</head>
<body onload="load()" onunload="GUnload()">
<div id="map" style="width: 500px; height: 300px"></div>
</body>
</html>
. 이번 소스도 간단하게 뜯어보았다. 어떤가 너무 쉽지않은가?? ㅋㅋ