Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

구글맵 JavaScript API

2,927 views

Published on

구글맵 JavaScript API 이용법

Published in: Software
  • Be the first to comment

  • Be the first to like this

구글맵 JavaScript API

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

×