- 학교(서디대) 오픈 API 기초와 활용 수업 중 GooleMap API 사용법
사이트 들어가도 친절하게 예제로 다 나와있으나 수업한거니 기재하는게 좋을 것 같다고 생각한다.
https://developers.google.com/maps/documentation/javascript/?hl=ko-KR
<!DOCTYPE html>
<html DIR="LTR">
<head>
<!-- meta : viewport 지도가 화면전체에 표시하고 사용자가 크기를 조정할수 없도록 지정함. -->
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<link href="http://code.google.com/apis/maps/documentation/javascript/examples/default.css" rel="stylesheet" type="text/css" />
<title>Google Maps JavaScript API v3 예제: 간단한 지도</title>
<!-- 센서매개변수 False (데스크탑 사용시 GPS 로케이션 이 없으므로 -->
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
function initialize() {
// 사용자 위도/경도 지정(google.maps.LatLng)
var myLatlng = new google.maps.LatLng(37.397, 127.644);
// 지도 초기화(mpOptions)
var myOptions = {
// 줌 정도
zoom: 4,
// 위치(위도/경로)
center: myLatlng,
// 기본UI 를 사용하지 않도록설정(제거시 기본UI)
disableDefaultUI: true,
// 제공되는 컨트롤 추가( 컨트롤 표시 : True | 숨기기 : False )
panControl: false,
zoomControl: false,
scaleControl: true,
// 지도 타입설정
mapTypeId: google.maps.MapTypeId.ROADMAP
/*
ROADMAP - 일반적인 기본 2D 타입의 Google 지도를 표시
SATELLITC - 사진타일을 표시
HYBRID - 사진타일과 도로, 도시 등 주요 지형지물을 담고있는 타일 레이어를 함께 표시
TERRAIN - 고도 및 수경(산, 강등)을 표시하기 위한 물리적 기복타일을 표시
*/
}
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
}
</script>
</head>
<!-- HTML 페이지가 로딩된 후 onload 이벤트를 받은 후에 Map 객체 생성하여 화면에 보여짐 -->
<body onload="initialize()">
<div id="map_canvas"></div>
</body>
</html>
위에는 기본 GooGoleMap 소스 이고 화면에서 지도 설정인 Control 설정 부분
※ 본문 <body> 는 모두 동일하니 <script></script> 부분만 설명
<script type="text/javascript">
function initialize() {
var myOptions = {
zoom: 4,
/* 좌표 설정 */
center: new google.maps.LatLng(-33, 151),
/* Control 활성화 */
mapTypeControl: true,
/* Control 속성 */
mapTypeControlOptions: {
style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
},
/* 확대 축소 활성화 */
zoomControl: true,
zoomControlOptions: {
/* ZoomControl 미니로 설정 */
style: google.maps.ZoomControlStyle.SMALL
},
/* 지도 종류설정 */
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById("map_canvas"),
myOptions);
}
Control 설정을 하기위해서 해당 Control 활성화를 준다음 맵으로 설정부분을 입력하다.
사용자가 직접 해당 Control 의 위치를 변경 할 수 도 있다.
- 일단 위치설명
이 사진을 부고 직접 원하는 위치에 놓으면 된다.
- 사용 예
function initialize() {
var myOptions = {
zoom: 12,
center: new google.maps.LatLng(-28.643387, 153.612224),
mapTypeId: google.maps.MapTypeId.ROADMAP,
/* Control 사용을 위한 활성화 */
mapTypeControl: true,
/* 해당 Control 변경 옵션 설정 */
mapTypeControlOptions: {
style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR,
position: google.maps.ControlPosition.BOTTOM_CENTER
},
panControl: true,
panControlOptions: {
position: google.maps.ControlPosition.TOP_RIGHT
},
zoomControl: true,
zoomControlOptions: {
style: google.maps.ZoomControlStyle.LARGE,
position: google.maps.ControlPosition.LEFT_CENTER
},
scaleControl: true,
scaleControlOptions: {
position: google.maps.ControlPosition.TOP_LEFT
},
streetViewControl: true,
streetViewControlOptions: {
position: google.maps.ControlPosition.LEFT_TOP
}
}
var map = new google.maps.Map(document.getElementById("map_canvas"),
myOptions);
}
위와 똑같이 무든 Control 부분을 수정하기위해서 우선 해당 Control 활성화를 해준다음 작업을 해야한다.
