- GoogleMap API 오버레이 & 마커 표시
1. 오버레이 : 지도상의 위치정보 연결객체
2. 마커 : 지도상의 위치 표시(아이콘)
- 사용 예)
<!DOCTYPE html>
<html DIR="LTR">
<head>
<title>Google Maps JavaScript API v3 예제: 오버레이 제거</title>
<link href="http://code.google.com/apis/maps/documentation/javascript/examples/default.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
var map;
/* 클릭한 마커의 ID, 좌표를 관리할 배열 생성 */
var markersArray = [];
/* 초기화 */
function initialize() {
/* 초기화 나타날 지도 센터의 좌표 */
var haightAshbury = new google.maps.LatLng(37.7699298, -122.4469157);
var mapOptions = {
zoom: 12,
center: haightAshbury,
/* 출력한 지도 타입 */
mapTypeId: google.maps.MapTypeId.TERRAIN
};
/* 맵 생성 */
map = new google.maps.Map(document.getElementById("map_canvas"),
mapOptions);
/* 사용자의 이벤트처리할 리스너 */
google.maps.event.addListener(map, 'click', function(event) {
addMarker(event.latLng);
});
}
function addMarker(location) {
marker = new google.maps.Marker({
position: location,
map: map
});
/* 맵의 입력 */
markersArray.push(marker);
}
// Removes the overlays from the map, but keeps them in the array
/* 마커 지도(화면단)에서 지우기(실제 정보는 존재) */
function clearOverlays() {
if (markersArray) {
for (i in markersArray) {
markersArray[i].setMap(null);
}
}
}
// Shows any overlays currently in the array
function showOverlays() {
if (markersArray) {
for (i in markersArray) {
markersArray[i].setMap(map);
}
}
}
// Deletes all markers in the array by removing references to them
/* 마커정보 완전 삭제 */
function deleteOverlays() {
if (markersArray) {
for (i in markersArray) {
/* 마케지우고 */
markersArray[i].setMap(null);
}
/* 마커정보 배열 지우기 */
markersArray.length = 0;
}
}
</script>
</head>
<body onload="initialize();">
<div>
<input onclick="clearOverlays();" type=button value="오버레이 지우기" />
<input onclick="showOverlays();" type=button value="오버레이 모두 표시" />
<input onclick="deleteOverlays();" type=button value="오버레이 삭제" />
</div>
<div id="map_canvas" style="top:30px;width:600px; height:500px"></div>
</body>
</html>
'공부 > JAVASCRIPT' 카테고리의 다른 글
| JAVASCRIPT_[ window.event.keyCode ] (0) | 2013.08.27 |
|---|---|
| JAVASCRIPT_[ isNaN() 메서드 ] (0) | 2013.05.31 |
| JAVASCRIPT_[ GoogleMap API ] (0) | 2013.03.22 |
| JAVASCRIPT_[가변인자함수 작성] (0) | 2012.11.30 |
| JAVASCRIPT_[window.open() 화면 중앙출력] (0) | 2012.11.12 |