O slideshow foi denunciado.
Utilizamos seu perfil e dados de atividades no LinkedIn para personalizar e exibir anúncios mais relevantes. Altere suas preferências de anúncios quando desejar.

구글맵 JavaScript API

2.938 visualizações

Publicada em

구글맵 JavaScript API 이용법

Publicada em: Software
  • Seja o primeiro a comentar

  • Seja a primeira pessoa a gostar disto

구글맵 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. 결과 화면

×