메뉴 건너뛰기

Dev tips

JavaScript [google map api] 구글 맵스 API 로 지도 가져오기

taknim 2012.02.09 12:41 조회 수 : 16864 추천:3013

[주소로 좌표 가져오기]
http://maps.google.co.kr/maps/geo?q=서울%20구로구%20구로동

[JS API V3]
http://code.google.com/intl/ko-KR/apis/maps/documentation/javascript/basics.html#DetectingUserLocation

[기본 사용 예제 - php & html & js]
<?
// 맵 & 컨트롤 & 마커 (추가/삭제)
@ini_set("allow_url_fopen", "1"); // allow_url_fopen 가능 설정

$address = $_GET["address"]; // 주소
$coordinate = $_GET["coordinate"]; // 좌표 (coordinate x,y)
if($address == "undefined") $address = "";

if(!$coordinate && $address) { // 주소로 좌표 가져오기
  $json_url = "http://maps.google.co.kr/maps/geo?q=".urlencode($address);
  $json_result = json_decode(file_get_contents($json_url));
  $coordinate = $json_result->Placemark[0]->Point->coordinates[1].",".$json_result->Placemark[0]->Point->coordinates[0];
}

if(!$coordinate || $coordinate == ",") { // 좌표가 없을 경우
  $coordinate = "37.6111408,126.9955777"; // 기본 좌표
}
?>
<!DOCTYPE html>
<html>
<head>
<title>Google Maps JavaScript API v3 Example: Map Simple</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<meta charset="UTF-8">
<style type="text/css">
  html, body, #map_canvas {
    margin: 0;
    padding: 0;
    height: 100%;
  }
</style>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
  var map; // 맵
  var markpoint; // 마커
  var currentpoint = "<?=$coordinate?>"; // 선택한 좌표를 변수에 저장
  var defaultPoint = new google.maps.LatLng(<?=$coordinate?>); // 기본 위치 설정

  function initialize() {
    // 지도 옵션
    var myOptions = {
      zoom: 16, // 줌레벨
      center: defaultPoint, // 지도 가운데 설정
      mapTypeControl: true, // 지도 유형 컨트롤
      zoomControl: true, // 줌 컨트롤
      scaleControl: true, // 축척 컨트롤
      streetViewControl: false, // 스트리트뷰 컨트롤
      mapTypeId: google.maps.MapTypeId.ROADMAP // 지도 유형을 일반지도로 설정
    };
    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); // 지도 생성 - map_canvas 라는 div 에 그린다.
    addMarker(defaultPoint);
    google.maps.event.addListener(map, 'click', function(event) { // 맵에 클릭 이벤트 추가
      clearMarker();
      addMarker(event.latLng);
      currentpoint = event.latLng.toUrlValue();
    });
  }

  function addMarker(location) {
    marker = new google.maps.Marker({ // 지도에 마커 추가
      position: location,
      animation: google.maps.Animation.DROP,
      map: map
    });
    markpoint = marker;
  }

  function clearMarker() {
    marker.setMap(null); // 지도에서 마커 삭제
    marker = null;
  }

  google.maps.event.addDomListener(window, "load", initialize); // 로딩시 처리
</script>
</head>
<body>
<div id="map_canvas" style="width:640px;height:338px;"></div>
</body>
</html>
번호 제목 글쓴이 날짜 조회 수
54 export to excel(xlsx, xls), csv, txt file - 엑셀 파일로 저장 file taknim 2016.12.15 4058
53 Regular Expressions Cheat Sheet - 정규표현식 치트 시트 taknim 2016.12.13 663
52 자바스크립트 클립보드 복사 (copy) taknim 2016.06.17 316
51 ip 국가/도시 코드(이름) 확인 (geoip) taknim 2015.02.24 2269
50 이메일, email 정규표현식 taknim 2015.02.24 2276
» [google map api] 구글 맵스 API 로 지도 가져오기 taknim 2012.02.09 16864
48 [js] 사업자등록번호, 주민등록번호, 외국인등록번호 유효성 체크 taknim 2012.01.30 13984
47 [js] jquery 브라우저 버전 확인 자바스크립트 taknim 2012.01.10 12655
46 [js] showModalDialog Method taknim 2011.12.05 10078
45 [js & php] 비밀번호 유효성 체크 - 연속 문자, 같은 문자 taknim 2011.11.09 27804
44 navigator.userAgent 정리 taknim 2011.07.06 6605
43 [jQuery] 팝업창이나 하위프레임에서 상위 객체를 셀렉트 taknim 2011.06.07 8269
42 아이피 형식 체크 함수 taknim 2011.03.11 6559
41 모든 브라우저에 숫자만 입력받기 적용 taknim 2011.02.24 7266
40 jQuery 숫자만 입력 taknim 2010.10.27 12781
39 태그삭제하는 스크립트 taknim 2010.06.16 9825
38 javascript 에서 cookie 남기기 setcookie taknim 2010.04.22 11831
37 자바스크립트로 폰트 설치 유무 확인하기 taknim 2010.04.21 12042
36 한글 정규식 taknim 2010.02.19 9283
35 새 창에 form을 post로 전송하기 taknim 2009.09.16 10492