메뉴 건너뛰기

Dev tips

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

taknim 2012.02.09 12:41 조회 수 : 16874 추천: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 4251
53 Regular Expressions Cheat Sheet - 정규표현식 치트 시트 taknim 2016.12.13 673
52 자바스크립트 클립보드 복사 (copy) taknim 2016.06.17 320
51 ip 국가/도시 코드(이름) 확인 (geoip) taknim 2015.02.24 2276
50 이메일, email 정규표현식 taknim 2015.02.24 2278
» [google map api] 구글 맵스 API 로 지도 가져오기 taknim 2012.02.09 16874
48 [js] 사업자등록번호, 주민등록번호, 외국인등록번호 유효성 체크 taknim 2012.01.30 14009
47 [js] jquery 브라우저 버전 확인 자바스크립트 taknim 2012.01.10 12661
46 [js] showModalDialog Method taknim 2011.12.05 10078
45 [js & php] 비밀번호 유효성 체크 - 연속 문자, 같은 문자 taknim 2011.11.09 27907
44 navigator.userAgent 정리 taknim 2011.07.06 6609
43 [jQuery] 팝업창이나 하위프레임에서 상위 객체를 셀렉트 taknim 2011.06.07 8269
42 아이피 형식 체크 함수 taknim 2011.03.11 6560
41 모든 브라우저에 숫자만 입력받기 적용 taknim 2011.02.24 7267
40 jQuery 숫자만 입력 taknim 2010.10.27 12783
39 태그삭제하는 스크립트 taknim 2010.06.16 9826
38 javascript 에서 cookie 남기기 setcookie taknim 2010.04.22 11832
37 자바스크립트로 폰트 설치 유무 확인하기 taknim 2010.04.21 12047
36 한글 정규식 taknim 2010.02.19 9285
35 새 창에 form을 post로 전송하기 taknim 2009.09.16 10494