Notice
Recent Posts
Recent Comments
Link
«   2024/05   »
일 월 화 수 목 금 토
1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 31
Tags more
Archives
Today
Total
관리 메뉴

I LOVE EJ

Google Maps API 본문

Tool/API

Google Maps API

BeOne 2013. 4. 1. 10:29

웹사이트 내에 '오시는길' 등의 특정 위치를 나타낼 때 보기 쉽게 이미지로 잘 표현할 수도 있지만,
특정 지도 서비스 업체의 API 를 이용하는 것도 좋은 방법입니다.

 

구글맵 API 를 이용하여 웹사이트에 위치를 표현하는 방법입니다.
'구글맵 API' - https://developers.google.com/maps/?hl=ko 를 검색해 들어가면 
JavaScript, Flash, 3D, Static 기반의 다양한 API를 볼 수 있습니다.

 

Maps JavaScript API(V3) 를 사용해 봤습니다.
Guide 를 활용하여 본인이 원하는 기능들을 구현하면 되겠습니다.

 

 

1. 기본 환경 세팅
- 기본적인 폼 구성입니다.

 

// HTML5 로 선언해야 합니다.
<!DOCTYPE html>
<html>
<head>

// Google map API를 호출합니다. 
// 사용자 위치 확인 사용 여부를 sensor 값으로 true, false 중 입력합니다.
<script type="text/javascript" src="https://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
function initialize() {
    // 지도 사용 스크립트
}
</script>
</head>

// onload 등의 이벤트로 initialize 함수를 페이지 로딩시 호출합니다.
<body onload="initialize()">

// 지도 영역을 생성합니다.
<div id="map_canvas" style="width:600px; height:400px;"></div>

</body>
</html>

 

 

2. 지도 사용 스크립트 작성
- 지도가 불려질 함수를 작성합니다.

 

function initialize() {

    // 지도 중앙에 표시될 위치의 좌표를 입력. (위도, 경도)
    var centerLating = new google.maps.LatLng(-34.397, 150.644);

    // 줌 설정. 최대 축소값(1), 최대 확대값(18)
    // 중앙에 위치할 좌표 설정.
    // Maptype : ROADMAP 은 입반적인 2D 지도입니다. (위성:SATELLITE, HYBRID, 지형:TERRAIN 등이 있습니다.)
    var myOptions = {
        zoom: 8,
        center: centerLating,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };

    // map_canvas 에 지도를 출력합니다.
    var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
}

 

 

3. 특정 지역 좌표값 검색
- 위의 스크립트를 작성하고 나면 임의의 좌표를 입력해서 지도가 출력되는 걸 확인할 수 있습니다.
- 이제 웹페이지에 표시할 지역의 좌표값(위도,경도)을 검색하여 2번 스크립트의 LatLng 함수에 입력합니다.
- 주소를 입력해서 위도, 경도를 반환하는 GeoCoding 이라는 서비스를 구축하여 경도, 위도를 알아내는 것보다,
포털에서 '위도 경도 검색' 으로 이미 구축된 GeoCoding 등의 서비스를 이용하여 경도, 위도를 알아내는게 편하네요.

국기원의 위도, 경도는 37.50191265817288, 127.03029334545135 입니다.
LatLng 메소드에 국기원의 좌표를 입력하면 다음과 같은 지도가 출력됩니다.

 

 

 

4. 마커 표시
- 찾는 위치가 국기원이라는 표시를 위해 마커와 텍스트를 입력합니다.
- 강남역과 역삼역 사이에 있다는 것을 인식시키기 위해 지도 중앙 좌표를 살짝 조절해 줍니다.

 

function initialize() {

    // centerLatlng : 지도 중앙
    // buildingLatlng : 국기원 좌표(마커)
    var buildingLatlng = new google.maps.LatLng(37.50191265817288, 127.03029334545135);
    var centerLatlng   = new google.maps.LatLng(37.500372053558664, 127.03187584877014);

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

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

    // marker 와 title 표시
    var marker = new google.maps.Marker({
        position: buildingLatlng,
        map: map,
        title:"국기원"
    });
}

 

 

5. 완성 소스

 

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="https://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
function initialize() {
    var buildingLatlng = new google.maps.LatLng(37.50191265817288, 127.03029334545135);
    var centerLatlng   = new google.maps.LatLng(37.500372053558664, 127.03187584877014);
    var myOptions = {
        zoom: 16,
        center: centerLatlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
    var marker = new google.maps.Marker({
        position: buildingLatlng,
        map: map,
        title:"국기원"
    });
}
</script>
</head>
<body>
<body onload="initialize()">
<div id="map_canvas" style="width: 600px; height: 400px; border:1px solid #ddd""></div> 
</body>
</html>

 

 

 

이 외에도,
동서남북의 위치를 각도로 바꿀 수 있음,
마커, 혹은 아이콘을 여러개 놓을 수 있음,
여러 형태(원,사각형,폴리곤...)의 영역 지정 가능,
교통정보, 자전거 경로 등의 레이어 추가 가능,
경로 설정 등 구글맵 서비스와 거의 동일한 기능들을 모두 이용할 수 있습니다.

저작자표시

'Tool > API' 카테고리의 다른 글

위도 경도 변환 사이트  (1) 2013.04.01
Google Maps API 이용해서 주소값 저장하기. (googleapi, geocode, geocoder, latlng, java, javascript 등)  (0) 2013.04.01
'Tool/API' Related Articles more