메뉴 건너뛰기

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>
번호 제목 글쓴이 날짜 조회 수
472 유용한 함수 pack, unpack, ip2long, long2ip taknim 2009.01.13 33339
471 해커들을 위한 CMD 툴 모음 file taknim 2008.05.22 32563
470 [js & php] 비밀번호 유효성 체크 - 연속 문자, 같은 문자 taknim 2011.11.09 27804
469 [Oracle] ORA-00600, ORA-06544, ORA-06553 오류 발생시 taknim 2009.06.09 23831
468 리눅스 콘솔 단축키 taknim 2009.07.06 21914
467 리눅스 split | 파일 사이즈, 라인 단위 자르기 taknim 2008.06.19 20595
466 mcrypt 암호화/복호화 AES/CBC/PKCS5/PKCS7/PADDING [1] taknim 2010.03.19 19412
465 최고의 웹디자인용 작은 아이콘 다운로드 사이트 모음 : Best Small Icon Sites taknim 2007.07.11 18936
464 [mysql] 동적 쿼리 생성시 변수를 대입하거나 값을 받아오기 taknim 2009.08.17 17152
463 [MSSQL] MS-SQL 동적쿼리 이용하기 taknim 2009.12.28 16928
» [google map api] 구글 맵스 API 로 지도 가져오기 taknim 2012.02.09 16864
461 [C/C++] prnitf 역슬래쉬 문자 taknim 2008.11.28 16248
460 EUC-KR <-> UTF-8 상호변환 하기 (문자셋charset 변환) taknim 2008.05.27 16113
459 [oracle] isqlplus 에서 특수문자(&) 입력하는 방법 taknim 2012.08.10 16045
458 [mysql] mysqlbinlog 실행시 캐릭터셋(utf8) 오류 taknim 2009.08.25 15747
457 [Oracle] DBNEWID Utility - DBNAME,DBID변경하기 taknim 2009.07.06 15565
456 inode 개념 taknim 2008.07.08 15366
455 UTF-8 을 이용해서 다국어버젼 웹사이트 개발시 고려사항 taknim 2008.10.17 15291
454 누구나 다 아는 네트워크(소켓) 통신시의 함수 pack과 unpack taknim 2008.05.17 14589
453 Postfix SMTP 서버를 이용한 IPv6 메일(SMTP) 서버 구성 taknim 2008.02.15 14443