구글맵 JavaScript API 이용법

1. STG 월요학습회 자료
Google Map
JavaScript API
이 강 범

2. Prixmedia co., LTD All rights reserved.
▶
구글맵 API 사용방법
1. 주소 방식과 좌표 방식
주소방식 : 한글 주소 및 영문 주소로 지도를 표현 해 주는 방법
좌표방식 : Google 지도에서 인식하는 형식의 좌표(Google 맵에서 원하는 지역의 좌표를 얻을수 있음)
2. 간편하게 좌표 구하는 법
http://map.google.com/ 으로 이동
원하는 지역을 찾은 후 원하는 지역에서 마우스 오른쪽 버튼을 눌러 팝업메뉴 호출
‘이곳이 궁금한가요?’ 를 선택 하면 왼쪽 상단에 좌표를 포함한 주소가 나오게 됩니다.

3. Prixmedia co., LTD All rights reserved.
▶
구글맵 API 사용방법
주소를 이용한 JavaScript
1. API를 사용할 스크립트 라이브러리 호출
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
2. 맵이 나와야 할 영역을 지정해주기( 주의점: style 크기를 지정해주지 않으면 맵이 안보이게 됩니다 )
구글맵 한국 :
<div id="map_kor" style="width:728px;height:330px;"></div>
구글맵 중국 :
<div id="map_chn" style="width:728px;height:330px;"></div>
구글맵 미국 :
<div id="map_nam" style="width:728px;height:330px;"></div>
스크립트 부분은 다음페이지에….

4. Prixmedia co., LTD All rights reserved.
▶
구글맵 API 사용방법
주소를 이용한 JavaScript
1. 스크립트 작성
function gmap(addr, id, zm){
var map;
var geocoder = new google.maps.Geocoder();
var latlng = new google.maps.LatLng(36.610303, 127.854462);
var mapOptions = {
zoom: zm,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById(id), mapOptions);
geocoder.geocode( {'address':addr}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
map.setCenter(results[0].geometry.location);
}else{
alert("잘못된 주소가 입력되었습니다.");
//alert("Geocode was not successful for the following reason: " + status);
// 에러 처리 스크립트 작성
}
});
}
// gmap(주소, div의 ID, 지도의 줌 수치)
$(document).ready(function(){
gmap('korea', "map_kor", 6); // korea 라고 써있는 부분이 주소가 들어갈 부분
gmap('china', "map_chn", 4); // china 라고 써있는 부분이 주소가 들어갈 부분
gmap('america', "map_nam", 4); // america 라고 써있는 부분이 주소가 들어갈 부분
});

5. Prixmedia co., LTD All rights reserved.
▶
구글맵 API 사용방법
주소를 이용한 JavaScript
1. 결과 화면

6. Prixmedia co., LTD All rights reserved.
▶
구글맵 API 사용방법
좌표를 이용한 JavaScript
1. 스크립트 작성 ( HTML부분과 라이브러리 부분은 동일하니 스크립트만 보여드리도록 하겠습니다. )
function gmap(lat1, lat2, zm, id){
var latlng = new google.maps.LatLng(lat1, lat2);
var myOptions = {
zoom : zm,
center : latlng,
mapTypeId : google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById(id), myOptions);
// 맵에 마커 표시
/* var marker = new google.maps.Marker({
position : latlng,
map : map
});*/
}
// 좌표코드로 위치를 잡는 방법
// gmap(좌표, 지도의 줌수치, DIV의 ID)
$(document).ready(function() {
gmap(36.610303, 127.854462, 6, "map_kor"); // 숫자 부분에 좌표 입력
gmap(34.709582, 103.652713, 4, "map_chn");
gmap(39.676456, -101.861289, 4, "map_nam");
});

7. Prixmedia co., LTD All rights reserved.
▶
구글맵 API 사용방법
주소를 이용한 JavaScript
1. 결과 화면