Google 지도 컨트롤 세트
Google 지도 위젯 세트
Google 지도 - 기본 위젯 세트 설정:
Google 지도 - 기본 위젯 세트 설정:
표준 Google 지도를 사용할 때 기본값은 설정은 다음과 같습니다.
.Zoom - 지도의 확대/축소 수준을 제어하는 슬라이더를 표시합니다.
.PPan - 바닥이 평평한 그릇 모양의 컨트롤이 지도에 표시됩니다. 지도 이동
.MapType - 사용자가 지도 유형(로드맵 및 위성) 간에 전환할 수 있습니다
.StreetView - 지도의 특정 지점으로 드래그하여 스트리트 뷰를 열 수 있는 페그맨 아이콘으로 표시됩니다.
Google 지도 - 추가 컨트롤 세트
위의 기본 컨트롤 세트 외에도 Google에는 다음 기능도 있습니다.
.Scale - 지도 축척 표시
.Rotate - 작은 원형 아이콘 표시 지도 회전
.review 지도 - 넓은 지역의 관점에서 지도를 내려다보기
지도를 생성할 때 설정 옵션을 통해 표시할 컨트롤 세트를 지정하거나 호출을 통해 지도의 설정 옵션을 변경할 수 있습니다. setOptions().
Google 지도 - 기본 컨트롤 세트 끄기
기본 컨트롤 세트를 끌 수도 있습니다.
기본 컨트롤 세트를 끄려면 지도의 비활성화DefaultUI 속성을 true로 설정하세요.
Instance
<html>
<head>
<script
src="http://maps.googleapis.com/maps/api/js?key=AIzaSyDY0kkJiTPVd2U7aTOAwhc9ySH6oHxOIYM&sensor=false">
</script>
<script>
function initialize()
{
var mapProp = {
center: new google.maps.LatLng(51.508742,-0.120850),
zoom:7,
disableDefaultUI:true,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("googleMap"),mapProp);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="googleMap" style="width:500px;height:380px;"></div>
</body>
</html>Run Instance»
온라인 인스턴스를 보려면 "인스턴스 실행" 버튼을 클릭하세요
Google 지도 - 모든 위젯 세트 열기
일부 위젯 세트는 기본적으로 지도에 표시되지만 다른 위젯 세트는 사용자가 설정하지 않으면 표시되지 않습니다.
표시하려면 컨트롤을 true로 설정하고, 숨기려면 컨트롤을 false로 설정하세요.
다음 인스턴스는 모든 컨트롤을 활성화합니다.
Instances
<html>
<head>
<script
src="http://maps.googleapis.com/maps/api/js?key=AIzaSyDY0kkJiTPVd2U7aTOAwhc9ySH6oHxOIYM&sensor=false">
</script>
<script>
function initialize()
{
var mapProp = {
center: new google.maps.LatLng(51.508742,-0.120850),
zoom:7,
panControl:true,
zoomControl:true,
mapTypeControl:true,
scaleControl:true,
streetViewControl:true,
overviewMapControl:true,
rotateControl:true,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("googleMap"),mapProp);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="googleMap" style="width:500px;height:380px;"></div>
</body>
</html>인스턴스 실행»
온라인 인스턴스를 보려면 '인스턴스 실행' 버튼을 클릭하세요.
Google 지도 - 컨트롤 세트 수정
일부 지도 컨트롤은 구성 가능합니다. 제어 옵션 필드를 지정하여 제어 세트를 변경합니다.
F 예를 들어 확대/축소 컨트롤을 수정하는 옵션은 ZoomControlOptions에 지정됩니다. ZoomControlOptions에는 다음 3가지 옵션이 포함되어 있습니다.
.google.maps.ZoomControlStyle.SMALL - 최소화된 확대/축소 컨트롤 표시
.google.maps.ZoomControlStyle.LARGE - 표준 확대/축소 슬라이딩 컨트롤 표시
.google .maps.ZoomControlStyle.DEFAULT - 장치 및 지도 크기를 기준으로 가장 적절한 컨트롤을 선택하세요
Instance
<html>
<head>
<script
src="http://maps.googleapis.com/maps/api/js?key=AIzaSyDY0kkJiTPVd2U7aTOAwhc9ySH6oHxOIYM&sensor=false">
</script>
<script>
function initialize()
{
var mapProp = {
center: new google.maps.LatLng(51.508742,-0.120850),
zoom:7,
zoomControl:true,
zoomControlOptions: {
style:google.maps.ZoomControlStyle.SMALL
},
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("googleMap"),mapProp);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="googleMap" style="width:500px;height:380px;"></div>
</body>
</html>Run Instance»
온라인 인스턴스를 보려면 "인스턴스 실행" 버튼을 클릭하세요
참고: 컨트롤을 수정해야 하는 경우 먼저 컨트롤을 활성화하세요(true로 설정).
또 다른 컨트롤은 MapType 컨트롤입니다.
MapType 컨트롤은 다음 스타일 옵션 중 하나로 표시될 수 있습니다.
google.maps.MapTypeControlStyle.HORIZONTAL_BAR는 Google 지도에서처럼 가로 막대에 컨트롤 세트를 버튼으로 표시하는 데 사용됩니다.
google.maps.MapTypeControlStyle.DROPDOWN_MENU, 드롭다운 메뉴에서 지도 유형을 선택할 수 있는 단일 버튼 컨트롤을 표시하는 데 사용됩니다.
google.maps.MapTypeControlStyle.DEFAULT는 화면 크기에 따라 다르며 API의 향후 버전에서 변경될 수 있는 '기본' 동작을 표시하는 데 사용됩니다.
Instance
<html>
<head>
<script
src="http://maps.googleapis.com/maps/api/js?key=AIzaSyDY0kkJiTPVd2U7aTOAwhc9ySH6oHxOIYM&sensor=false">
</script>
<script>
function initialize()
{
var mapProp = {
center: new google.maps.LatLng(51.508742,-0.120850),
zoom:7,
mapTypeControl:true,
mapTypeControlOptions: {
style:google.maps.MapTypeControlStyle.DROPDOWN_MENU
},
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("googleMap"),mapProp);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="googleMap" style="width:500px;height:380px;"></div>
</body>
</html>Run Instance»
온라인 인스턴스를 보려면 "인스턴스 실행" 버튼을 클릭하세요
마찬가지로 ControlPosition 속성을 사용하여 컨트롤의 위치를 지정할 수 있습니다.
Instance
<html>
<head>
<script
src="http://maps.googleapis.com/maps/api/js?key=AIzaSyDY0kkJiTPVd2U7aTOAwhc9ySH6oHxOIYM&sensor=false">
</script>
<script>
function initialize()
{
var mapProp = {
center: new google.maps.LatLng(51.508742,-0.120850),
zoom:7,
mapTypeControl:true,
mapTypeControlOptions: {
style:google.maps.MapTypeControlStyle.DROPDOWN_MENU,
position:google.maps.ControlPosition.TOP_CENTER
},
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("googleMap"),mapProp);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="googleMap" style="width:500px;height:380px;"></div>
</body>
</html>인스턴스 실행 »
온라인 인스턴스를 보려면 "인스턴스 실행" 버튼을 클릭하세요
Google 지도 - 사용자 정의 컨트롤 세트
클릭 이벤트에 대한 런던으로 돌아가기 사용자 정의 컨트롤 만들기: (지도를 드래그한 경우):
Instance
<html>
<head>
<script
src="http://maps.googleapis.com/maps/api/js?key=AIzaSyDY0kkJiTPVd2U7aTOAwhc9ySH6oHxOIYM&sensor=false">
</script>
<script>
var map;
var london = new google.maps.LatLng(51.508742,-0.120850);
// Add a Home control that returns the user to London
function HomeControl(controlDiv, map) {
controlDiv.style.padding = '5px';
var controlUI = document.createElement('div');
controlUI.style.backgroundColor = 'yellow';
controlUI.style.border='1px solid';
controlUI.style.cursor = 'pointer';
controlUI.style.textAlign = 'center';
controlUI.title = 'Set map to London';
controlDiv.appendChild(controlUI);
var controlText = document.createElement('div');
controlText.style.fontFamily='Arial,sans-serif';
controlText.style.fontSize='12px';
controlText.style.paddingLeft = '4px';
controlText.style.paddingRight = '4px';
controlText.innerHTML = '<b>Home<b>'
controlUI.appendChild(controlText);
// Setup click-event listener: simply set the map to London
google.maps.event.addDomListener(controlUI, 'click', function() {
map.setCenter(london)
});
}
function initialize() {
var mapDiv = document.getElementById('googleMap');
var myOptions = {
zoom: 12,
center: london,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(mapDiv, myOptions);
// Create a DIV to hold the control and call HomeControl()
var homeControlDiv = document.createElement('div');
var homeControl = new HomeControl(homeControlDiv, map);
// homeControlDiv.index = 1;
map.controls[google.maps.ControlPosition.TOP_RIGHT].push(homeControlDiv);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="googleMap" style="width:500px;height:380px;"></div>
</body>
</html>Run Instance»
온라인 인스턴스를 보려면 "인스턴스 실행" 버튼을 클릭하세요
Google 지도 - 컨트롤 세트 참조 매뉴얼
Google 지도 API 참조 매뉴얼.
