STG 월요학습회 자료

Google Map JavaScript API

이 강 범

Prixmedia co., LTD All rights reserved.

▶

구글맵 API 사용방법1. 주소 방식과 좌표 방식

주소방식 : 한글 주소 및 영문 주소로 지도를 표현 해 주는 방법

좌표방식 : Google 지도에서 인식하는 형식의 좌표 (Google 맵에서 원하는 지역의 좌표를 얻을수 있음 )

2. 간편하게 좌표 구하는 법

http://map.google.com/ 으로 이동

원하는 지역을 찾은 후 원하는 지역에서 마우스 오른쪽 버튼을 눌러 팝업메뉴 호출

‘ 이곳이 궁금한가요 ?’ 를 선택 하면 왼쪽 상단에 좌표를 포함한 주소가 나오게 됩니다 .

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>

스크립트 부분은 다음페이지에… .

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 라고 써있는 부분이 주소가 들어갈 부분

});

Prixmedia co., LTD All rights reserved.

▶

구글맵 API 사용방법주소를 이용한 JavaScript

1. 결과 화면

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");

});

Prixmedia co., LTD All rights reserved.

▶

구글맵 API 사용방법주소를 이용한 JavaScript

1. 결과 화면