구글맵(Google Maps API) 기초 적용, 구글맵 좌표값 구하기

JavaScript 2012. 11. 16. 17:31

구글맵(Google Maps API) 기초 적용, 구글맵 좌표값 구하기

1). 구글맵 기초 적용

구글맵(Google Map)을 사용하는 가장 기본적인 내용입니다. 다음의 소스는 지도 상의 특정지점을 표시되는 지도의 중앙에 오게 하는 소스코드입니다. 구글맵에서 지도의 어떤 지점을 인식하는 것은 경도, 위도의 좌표값입니다. 좌표값을 구하는 방식은 아래의 “2). 구글 맵 좌표값 구하기”를 참조하시기 바랍니다.

<!DOCTYPE html>
< html>
< head>

<meta name=”viewport” content=”initial-scale=1.0, user-scalable=no”/>
// viewport 태그: 페이지의 크기의 확대/축소에 관여
// initial-scale=1.0: 원래 크기 그대로
// user-scalable = no: 사용자가 임의로 확대/축소를 할 수 없게

<style type=”text/css”>
html { height : 100% }
body { height : 100%; margin: 0; padding: 0 }
#map_canvas { height : 100% }
< /style>

<script type = “text/javascript” src = “http://maps.googleapis.com/maps/api/js?sensor=true”></script>
// Google maps API의 링크
// sensor=true: 현재 사용자의 위치를 읽어들이는 여부를 선언하는 부분이다.
//위의 예시에서는 true라고 표시하여 현재 사용자의 위치를 불러들인다고 선언.

<script type = “text/javascript”>

function initialize(){

var latlng = new google.maps.LatLng(37.5240220, 126.9265940);// 좌표값

var myOptions = {
zoom: 14,
center:latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};

var map = new google.maps.Map(document.getElementById(“map_canvas”), myOptions);

}

</script>

// Google maps API의 객체 안에 변수값들을 설정함으로서 Map을 초기화한다.
// initialize()라는 함수를 만들어 초기화하는데 사용한다.
// google.maps.LatLng: 좌표 변수 type. 이 type으로 latlng라는 변수를 생성한다.
// myOptions라는 배열에 지도의 확대 정도(zoom), 지도의 중심 좌표(center), 지도의 형식에 관한 정보(mapTypeid)를
// 저장하여 맵의 설정 정보로 활용가능.
// mapTypeid는 ROADMAP(일반 2D 지도), SATELLITE(위성 사진), HYBRID(위성 사진과 도로명 등의 지명 표시),
// TERRAIN(등고선과 물의 흐름 표시)의 네 가지 종류가 있다.

// 이 설정 정보들을 초기화 한 후 아래와 같이 google.maps.Map type의 변수인 map을 위의 map_canvas 컨테이너와
// 위의 설정배열로 선언하면 된다.

</head>

<body onload=”initialize()”>
<div id=”map_canvas” style=”width:100%; height:100%”></div>
// 초기화 함수를 실행하면서 body 안의 map_canvas 컨테이너의 크기를 지정해준다.

</body>
< /html>

[자료출처: Google Map API, http://code.google.com/intl/ko-KR/apis/maps/]

2). 구글맵 좌표값 구하기

a. 구글맵 지도(http://maps.google.com/)에서 검색창에 주소를 입력한다.
b. 좌표값을 구할 지점에 마우스커서를 두고 마우스 오른 쪽 메뉴
c. 마우스 오른쪽 메뉴에서 “이곳이 궁금한가요?” 클릭
d. 검색창에 해당 지점의 좌표값이 나타난다.

Leave a Reply ?
저작자표시

'JavaScript' 카테고리의 다른 글

jQuery 샘플링크  (0) 2013.10.18
Jquery each  (0) 2013.01.07
Google Maps JavaScript API 사용법  (0) 2012.11.16
Ajax 마스터하기  (0) 2012.09.03
jQuery개요  (0) 2012.09.03
Posted by 퓨전마법사
,

티스토리툴바