@CHARSET "EUC-KR";
html, body {
height: 100%;
margin: 0;
padding: 0;
}
#map_canvas {
height: 80%;
width:80%;
}
@media print {
html, body {
height: auto;
}
#map_canvas {
height: 80%;
width:80%;
}
}
--------------------------------------------------------------<%@ page contentType="text/html; charset=EUC-KR" pageEncoding="EUC-KR"%>
<% request.setCharacterEncoding("EUC-KR"); %>
<%
/*
aps API에는 다음과 같은 여러 유형의 오버레이가 있습니다.
지도 상의 한 위치는 마커를 사용하여 표시됩니다.
마커가 때로는 맞춤형 아이콘 이미지를 표시할 수도 있습니다.
이러한 마커를 일반적으로 '아이콘'이라고 합니다. 마커와 아이콘은 Marker
유형의 객체입니다. 자세한 내용은 아래의 마커 및 아이콘을 참조하세요.
지도에 있는 선은 일련의 순서로 된 위치를 나타내는 폴리라인을 사용하여 표시됩니다.
선은 Polyline 유형의 객체입니다. 자세한 내용은 폴리라인을 참조하세요.
지도에서 임의의 모양으로 된 영역은 폴리라인과 유사한 폴리곤을사용하여 표시됩니다.
폴리라인과 마찬가지로 폴리곤도 일련의 순서로 된 위치입니다. 하지만 폴리라인과 달리
폴리곤은 둘러싸는 영역을 정의합니다. 자세한 내용은 아래의 폴리곤을 참조하세요.
지도 레이어는 오버레이 지도 유형을 사용하여 표시될 수 있습니다. 기본 지도 타일 집합을
대체하거나 기존 기본 지도 타일 집합 위에 오버레이로 표시하는 맞춤형 지도 유형을 만들어
자신의 타일 집합을 만들 수 있습니다. 자세한 내용은 맞춤형 지도 유형을 참조하세요.
정보창도 지도 맨 위의 지정된 위치에 팝업 풍선을 띄워 콘텐츠(대개 텍스트나 이미지)를
표시하기 위한 특별한 유형의 오버레이입니다. 자세한 내용은 정보창을 참조하세요.
자신만의 맞춤형 오버레이를 구현할 수도 있습니다. 이러한 맞춤형 오버레이는 OverlayView
인터페이스를 구현합니다. 자세한 내용은 맞춤형 오버레이를 참조하세요.
오버레이 추가및 삭제
*/
%>
<!DOCTYPE html>
<html DIR="LTR">
<head>
<title>Google Maps JavaScript API v3 예제: 오버레이 제거</title>
<link href="../api.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;
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;
}
}
//body 속에 있는 것을 분리하였다.
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<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="width:80%; height:80%"></div>
</body>
</html>
-- 결과 : 오버레이를 표시하고 지우고 삭제가 가능
---------------------------------------------------------------------------------
<%@ page contentType="text/html; charset=EUC-KR" pageEncoding="EUC-KR"%>
<% request.setCharacterEncoding("EUC-KR"); %>
<%
%>
<!DOCTYPE html>
<html DIR="LTR">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<title>Google Maps JavaScript API v3 예제: 마커 애니메이션</title>
<link href="../api.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 stockholm = new google.maps.LatLng(59.32522, 18.07002);
var parliament = new google.maps.LatLng(59.327383, 18.06747);
var img;
var marker;
var map;
function initialize() {
var mapOptions = {
zoom: 13,
mapTypeId: google.maps.MapTypeId.ROADMAP,
center: stockholm
};
img = "S-1.jpg";
marker = img;
map = new google.maps.Map(document.getElementById("map_canvas"),
mapOptions);
marker = new google.maps.Marker({
map:map,
draggable:true,
animation: google.maps.Animation.DROP,
position: parliament,
icon : img
});
google.maps.event.addListener(marker, 'click', toggleBounce);
}
function toggleBounce() {
if (marker.getAnimation() != null) {
marker.setAnimation(null);
} else {
marker.setAnimation(google.maps.Animation.BOUNCE);
}
}
//body 속에 있는 것을 분리하였다.
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map_canvas" style="width:80%; height:80%"></div>
</body>
</html>
-- 결과 : 마커의 이미지가 변환됨
<%@ page contentType="text/html; charset=EUC-KR" pageEncoding="EUC-KR"%>
<% request.setCharacterEncoding("EUC-KR"); %>
<%
/*
복잡한 아이콘은 복잡한 모양(클릭 가능한 지역을 표시)을 지정하고 그림자 이미지를
추가하며 다른 오버레이와 관련하여 이미지가 표시되는 방법에 대한 스택 순서('stack order')
를 지정합니다. 이 방식으로 지정된 아이콘은 icon 및 shadow 속성을 MarkerImage
유형 객체로 설정해야 합니다.
그림자 이미지는 일반적으로 메인 이미지에서 오른쪽 위 45도 각도로 만들어져야 하며
그림자 이미지의 왼쪽 아래는 아이콘 이미지의 왼쪽 아래와 정렬되어야 합니다.
이미지 경계가 지도에 바르게 표시되게 하기 위해 그림자 이미지는 알파 투명도를 가진
24비트 PNG 이미지여야 합니다.
MarkerImage 객체는 이미지를 정의할 뿐 아니라 아이콘의 size, 아이콘의 origin
(예를 들어 원하는 이미지가 스프라이트 형태로 더 큰 이미지에 속해 있는 경우) 및
아이콘의 핫스팟이 위치해야 하는 anchor(원점 기준)까지도 정의합니다.
다음 예에서는 호주 뉴사우스웨일스 주 시드니 인근의 해변을 나타내는 복잡한
마커를 만듭니다. anchor는 깃대의 밑부분과 일치하도록 (0,32)로 설정되어 있습니다.
*/
%>
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<link href="../api.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true">
</script>
<script type="text/javascript">
function initialize() {
var myOptions = {
zoom: 10,
center: new google.maps.LatLng(-33.9, 151.2),
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById("map_canvas"),
myOptions);
setMarkers(map, beaches);
}
/**
* Data for the markers consisting of a name, a LatLng and a zIndex for
* the order in which these markers should display on top of each
* other.
*/
var beaches = [
['Bondi Beach', -33.890542, 151.274856, 4],
['Coogee Beach', -33.923036, 151.259052, 5],
['Cronulla Beach', -34.028249, 151.157507, 3],
['Manly Beach', -33.80010128657071, 151.28747820854187, 2],
['Maroubra Beach', -33.950198, 151.259302, 1]
];
function setMarkers(map, locations) {
// Add markers to the map
// Marker sizes are expressed as a Size of X,Y
// where the origin of the image (0,0) is located
// in the top left of the image.
// Origins, anchor positions and coordinates of the marker
// increase in the X direction to the right and in
// the Y direction down.
var image = new google.maps.MarkerImage('close-icon.gif',
// This marker is 20 pixels wide by 32 pixels tall.
new google.maps.Size(20, 32),
// The origin for this image is 0,0.
new google.maps.Point(0,0),
// The anchor for this image is the base of the flagpole at 0,32.
new google.maps.Point(0, 32));
var shadow = new google.maps.MarkerImage('S-1.jpg',
// The shadow image is larger in the horizontal dimension
// while the position and offset are the same as for the main image.
new google.maps.Size(37, 32),
new google.maps.Point(0,0),
new google.maps.Point(0, 32));
// Shapes define the clickable region of the icon.
// The type defines an HTML <area> element 'poly' which
// traces out a polygon as a series of X,Y points. The final
// coordinate closes the poly by connecting to the first
// coordinate.
var shape = {
coord: [1, 1, 1, 20, 18, 20, 18 , 1],
type: 'poly'
};
for (var i = 0; i < locations.length; i++) {
var beach = locations[i];
var myLatLng = new google.maps.LatLng(beach[1], beach[2]);
var marker = new google.maps.Marker({
position: myLatLng,
map: map,
shadow: shadow,
icon: image,
shape: shape,
title: beach[0],
zIndex: beach[3]
});
}
}
</script>
</head>
<body onload="initialize()">
<div id="map_canvas" style="width:80%; height:80%"></div>
</body>
</html>
-- 결과 : 배열의 형식으로 이미지가 출력된다.
--------------------------------------------------------------------------------- -- 결과 : 배열의 형식으로 이미지가 출력된다.
<%@ page contentType="text/html; charset=EUC-KR" pageEncoding="EUC-KR"%>
<% request.setCharacterEncoding("EUC-KR"); %>
<%
/*
Polyline 생성자는 선의 LatLng 좌표를 지정하는 Polyline options
집합과 스타일 집합을 가져와서 폴리라인의 시각적인 동작을 조정합니다.
Polyline은 일련의 직선 선분으로 지도에 그려집니다. 선을 생성하거나
생성 후 속성을 변경할 때 사용되는 Polyline options 객체에서 선의 획에
대한 맞춤 색상, 두께 및 불투명도를 지정할 수 있습니다. 폴리라인에서 지원하는
획 스타일은 다음과 같습니다.
strokeColor - "#FFFFFF" 형식의 16진수 HTML 색상을 지정합니다. Polyline
클래스는 이름이 지정된 색상을 지원하지 않습니다.
strokeOpacity - 선 색상의 불투명도에 대해 0.0 및 1.0(기본값) 사이의 분수 값을 지정합니다.
strokeWeight - 선 획의 두께를 픽셀 단위로 정의합니다.
좌표값에 따라 선을 그린다.
*/
%>
<!DOCTYPE html>
<html DIR="LTR">
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="content-type" content="text/html; charset=EUC-KR" />
<title>Google Maps JavaScript API v3 예제: 간단한 폴리라인</title>
<link href="../api.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">
function initialize() {
var myLatLng = new google.maps.LatLng(0, -180);
var myOptions = {
zoom: 3,
center: myLatLng,
mapTypeId: google.maps.MapTypeId.TERRAIN
};
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
var flightPlanCoordinates = [
new google.maps.LatLng(37.772323, -122.214897),
new google.maps.LatLng(21.291982, -157.821856),
new google.maps.LatLng(-18.142599, 178.431),
new google.maps.LatLng(-27.46758, 153.027892)
];
var flightPath = new google.maps.Polyline({
path: flightPlanCoordinates,
strokeColor: "#FFFF00", // 선색깔
strokeOpacity: 1.0,
strokeWeight: 2
});
flightPath.setMap(map);
}
</script>
</head>
<body onload="initialize()">
<div id="map_canvas"></div>
</body>
</html>
-- 결과 : 위도 경도의 순서대로 선을 이어준다.
<%@ page contentType="text/html; charset=EUC-KR" pageEncoding="EUC-KR"%>
<% request.setCharacterEncoding("EUC-KR"); %>
<%
/*
폴리라인은 일련의 좌표를 LatLng 객체의 배열로 지정합니다.
이 좌표를 가져오려면 MVCArray 유형의 배열을 반환하는 Polyline의
getPath()를 호출합니다. 이렇게 하면 다음 작업을 사용하여 배열을 조정하고 검사할 수 있습니다.
getAt() - 0에서 시작하는 지정된 색인 값에서 LatLng를 반환합니다.
insertAt() - 0에서 시작하는 지정된 색인 값에서 전달된 LatLng를 삽입합니다.
해당 색인 값의 기존 좌표는 앞으로 이동합니다.
removeAt() - 0에서 시작하는 지정된 색인 값에서 LatLng를 제거합니다.
참고: mvcArray[i] 구문을 사용하여 배열의 i번째 요소를 가져올 수 없습니다.
이 경우 mvcArray.getAt(i)를 사용해야 합니다
클릭한 곳과 다른곳을 직선으로 연결한다.
*/
%>
<!DOCTYPE html>
<html DIR="LTR">
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<title>Google Maps JavaScript API v3 예제: 복잡한 폴리라인</title>
<link href="../api.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 poly;
var map;
function initialize() {
var chicago = new google.maps.LatLng(41.879535, -87.624333);
var myOptions = {
zoom: 7,
center: chicago,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById('map_canvas'), myOptions);
var polyOptions = {
strokeColor: '#000000',
strokeOpacity: 1.0,
strokeWeight: 3
}
poly = new google.maps.Polyline(polyOptions);
poly.setMap(map);
// Add a listener for the click event
google.maps.event.addListener(map, 'click', addLatLng);
}
/**
* Handles click events on a map, and adds a new point to the Polyline.
* @param {MouseEvent} mouseEvent
*/
function addLatLng(event) {
var path = poly.getPath();
// Because path is an MVCArray, we can simply append a new coordinate
// and it will automatically appear
path.push(event.latLng);
// Add a new marker at the new plotted point on the polyline.
var marker = new google.maps.Marker({
position: event.latLng,
title: '#' + path.getLength(),
map: map
});
}
</script>
</head>
<body onload="initialize()">
<div id="map_canvas"></div>
</body>
</html>
-- 결과 : 클릭할때 마다 선을 그린다.
<%@ page contentType="text/html; charset=EUC-KR" pageEncoding="EUC-KR"%>
<% request.setCharacterEncoding("EUC-KR"); %>
<%
/* 삼각지대를 만들고 마지막 좌료는 생략 */
%>
<!DOCTYPE html>
<html DIR="LTR">
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<title>Google Maps JavaScript API v3 예제: 폴리곤 자동 닫기</title>
<link href="../api.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">
function initialize() {
var myLatLng = new google.maps.LatLng(24.886436490787712, -70.2685546875);
var myOptions = {
zoom: 5,
center: myLatLng,
mapTypeId: google.maps.MapTypeId.TERRAIN
};
var bermudaTriangle;
var map = new google.maps.Map(document.getElementById("map_canvas"),
myOptions);
var triangleCoords = [
new google.maps.LatLng(25.774252, -90.190262),
new google.maps.LatLng(18.466465, -66.118292),
new google.maps.LatLng(32.321384, -64.75737)
];
bermudaTriangle = new google.maps.Polygon({
paths: triangleCoords,
strokeColor: "#FF0000",
strokeOpacity: 0.8,
strokeWeight: 3,
fillColor: "#FF0000",
fillOpacity: 0.35
});
bermudaTriangle.setMap(map);
}
</script>
</head>
<body onload="initialize()">
<div id="map_canvas"></div>
</body>
</html>
-- 결과 : 선으로 연결된후 영역의 표시한다
<%@ page contentType="text/html; charset=EUC-KR" pageEncoding="EUC-KR"%>
<% request.setCharacterEncoding("EUC-KR"); %>
<%
/* 삼각지대 안의 내용만 좌표로 출력 */
%>
<!DOCTYPE html>
<html DIR="LTR">
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<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;
var infoWindow;
function initialize() {
var myLatLng = new google.maps.LatLng(24.886436490787712, -70.2685546875);
var myOptions = {
zoom: 5,
center: myLatLng,
mapTypeId: google.maps.MapTypeId.TERRAIN
};
var bermudaTriangle;
map = new google.maps.Map(document.getElementById("map_canvas"),
myOptions);
var triangleCoords = [
new google.maps.LatLng(25.774252, -80.190262),
new google.maps.LatLng(18.466465, -66.118292),
new google.maps.LatLng(32.321384, -64.75737)
];
bermudaTriangle = new google.maps.Polygon({
paths: triangleCoords,
strokeColor: "#FF0000",
strokeOpacity: 0.8,
strokeWeight: 3,
fillColor: "#FF0000",
fillOpacity: 0.35
});
bermudaTriangle.setMap(map);
// Add a listener for the click event
google.maps.event.addListener(bermudaTriangle, 'click', showArrays);
infowindow = new google.maps.InfoWindow();
}
function showArrays(event) {
// Since this Polygon only has one path, we can call getPath()
// to return the MVCArray of LatLngs
var vertices = this.getPath();
var contentString = "<b>Bermuda Triangle Polygon</b><br />";
contentString += "Clicked Location: <br />" + event.latLng.lat() + "," + event.latLng.lng() + "<br />";
// Iterate over the vertices.
for (var i =0; i < vertices.length; i++) {
var xy = vertices.getAt(i);
contentString += "<br />" + "Coordinate: " + i + "<br />" + xy.lat() +"," + xy.lng();
}
// Replace our Info Window's content and position
infowindow.setContent(contentString);
infowindow.setPosition(event.latLng);
infowindow.open(map);
}
</script>
</head>
<body onload="initialize()">
<div id="map_canvas"></div>
</body>
</html>
-- 결과 : 위와 동일하지만 영역이 표시된 지점에 클릭시 좌표값이 출력된다.
<%@ page contentType="text/html; charset=EUC-KR" pageEncoding="EUC-KR"%>
<% request.setCharacterEncoding("EUC-KR"); %>
<%
//지상의 내용을 출력한다. 확대
%>
<!DOCTYPE html>
<html DIR="LTR">
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<title>Google Maps JavaScript API v3 예제: 지면 오버레이</title>
<link href="../api.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">
function initialize() {
var newark = new google.maps.LatLng(40.740, -74.18);
var imageBounds = new google.maps.LatLngBounds(
new google.maps.LatLng(40.712216,-74.22655),
new google.maps.LatLng(40.773941,-74.12544));
var myOptions = {
zoom: 13,
center: newark,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
var oldmap = new google.maps.GroundOverlay(
"http://www.lib.utexas.edu/maps/historical/newark_nj_1922.jpg",
imageBounds);
oldmap.setMap(map);
}
</script>
</head>
<body onload="initialize()">
<div id="map_canvas"></div>
</body>
</html>
-- 결과 : 해당하는 좌표값의 그림이 출력된다.
<%@ page contentType="text/html; charset=EUC-KR" pageEncoding="EUC-KR"%>
<% request.setCharacterEncoding("EUC-KR"); %>
<%
/* InfoWindow은 지도 위의 부동 창에 콘텐츠를 표시합니다. 정보창은 만화책의 말풍선처럼 생겼으며 내용이 표시되는 영역과 뾰족한 줄기 부분으로 되어 있습니다. 줄기 끝은 지도의 지정된 지점을 가리킵니다. Google 지도에서 업체 마커를 클릭하면 정보창이 작동하는 것을 볼 수 있습니다.
InfoWindow 생성자는 InfoWindow options 객체를 받습니다. 이 경우 객체는 정보창을 표시하기 위한 초기 매개변수의 집합을 지정합니다. 정보창을 만든다고 해서 지도에 자동적으로 추가되지는 않습니다. 정보창이 표시되도록 하려면 InfoWindow에서 open() 메소드를 호출하여 열려는 Map에 전달하고 고정할 Marker에 전달(선택사항)해야 합니다. 마커가 제공되지 않는 경우 정보창은 position 속성에서 열립니다.
InfoWindow options 객체는 다음 필드를 포함하는 객체 리터럴입니다.
content는 정보창이 열릴 때 정보창 내부에 표시할 텍스트 또는 DOM 노드 문자열을 포함합니다.
pixelOffset는 정보창의 꼬리에서 정보창이 위치한 지점까지의 오프셋을 포함합니다. 실제로는 이 필드를 수정할 필요가 없습니다.
position는 이 정보창이 위치해 있는 LatLng를 포함합니다. 마커의 정보창을 열면 이 값이 새로운 위치로 자동 업데이트됩니다.
maxWidth는 정보창의 최대 너비를 픽셀 단위로 지정합니다. 기본적으로 정보창은 콘텐츠에 맞도록 확장되며 정보창이 지도에 맞도록 확장되는 경우 텍스트를 자동 줄바꿈(auto-wrap)합니다. maxWidth를 구현하는 경우 정보창은 픽셀 너비를 맞추기 위해 자동 줄바꿈 기능을 실행합니다. 청보창이 최대 너비에 도달했더라도 화면 공간을 사용할 수 있다면 정보창이 수직으로 계속 확장될 수 있습니다.
InfoWindow의 콘텐츠는 텍스트 문자열, HTML 스니펫 또는 DOM 요소 자체를 포함할 수 있습니다. 이 콘텐츠를 설정하려면 InfoWindow options 생성자에 콘텐츠를 전달하거나 InfoWindow에서 setContent()를 명시적으로 호출합니다. 콘텐츠 크기를 명시적으로 조정하려면 <div>를 사용하여 원하는 경우 스크롤을 가능하게 할 수 있습니다. 스크롤 기능을 사용하지 않고 콘텐츠가 정보창에서 사용 가능한 공간을 초과하는 경우 콘텐츠가 정보창을 빠져나갈 수 있습니다.
InfoWindow는 Marker 객체(마커 위치를 기준으로 하는 경우)나 지정한 LatLng에서 지도 자체에 연결될 수 있습니다. 한 번에 하나의 정보창만 표시(Google 지도의 동작과 동일)하려면 정보창을 하나만 만든 다음 사용자 클릭과 같은 지도 이벤트가 발생할 때 서로 다른 위치나 마커에 다시 지정합니다. 하지만 이렇게 할 경우 Google Maps API의 V2와는 달리 지도에 여러 개의 InfoWindow 객체가 표시될 수 있습니다.
정보창 위치를 변경하려면 정보창에서 setPosition()을 호출하여 위치를 명시적으로 변경하거나 InfoWindow.open() 메소드를 사용하여 새 마커에 연결할 수 있습니다. 마커를 전달하지 않고 open()을 호출하는 경우 InfoWindow에서는 InfoWindow options 객체를 통해 생성할 때 지정된 위치를 사용합니다.
다음 코드는 호주 중심부 내에 마커를 표시합니다. 해당 마커를 클릭하면 정보창이 표시됩니다. */
%>
CTYPE html>
<html DIR="LTR">
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<title>Google Maps JavaScript API v3 예제: 지면 오버레이</title>
<link href="../api.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">
function initialize() {
var myLatlng = new google.maps.LatLng(-25.363882,131.044922);
var myOptions = {
zoom: 4,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
var contentString = '<div id="content">'+
'<div id="siteNotice">'+
'</div>'+
'<h1 id="firstHeading" class="firstHeading">Uluru</h1>'+
'<div id="bodyContent">'+
'<p><b>Uluru</b>, also referred to as <b>Ayers Rock</b>, is a large ' +
'sandstone rock formation in the southern part of the '+
'Northern Territory, central Australia. It lies 335 km (208 mi) '+
'south west of the nearest large town, Alice Springs; 450 km '+
'(280 mi) by road. Kata Tjuta and Uluru are the two major '+
'features of the Uluru - Kata Tjuta National Park. Uluru is '+
'sacred to the Pitjantjatjara and Yankunytjatjara, the '+
'Aboriginal people of the area. It has many springs, waterholes, '+
'rock caves and ancient paintings. Uluru is listed as a World '+
'Heritage Site.</p>'+
'<p>Attribution: Uluru, <a href="http://en.wikipedia.org/w/index.php?title=Uluru&oldid=297882194">'+
'http://en.wikipedia.org/w/index.php?title=Uluru</a> (last visited June 22, 2009).</p>'+
'</div>'+
'</div>';
var infowindow = new google.maps.InfoWindow({
content: contentString
});
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title:"Uluru (Ayers Rock)"
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map,marker);
});
}
</script>
</head>
<body onload="initialize()">
<div id="map_canvas"></div>
</body>
</html>
-- 결과 : 마커를 클릭시 저장된 내용이 출력된다.
'progarm_old > [Android]' 카테고리의 다른 글
| [Map] 12.03.14 - Google Map Api -1 (0) | 2012.03.14 |
|---|---|
| [Android] 12.03.13 - 암시적 인텐트 (0) | 2012.03.13 |
| [Android] 12.03.08 - 구글맵 (0) | 2012.03.08 |
| [ANDROID] 12.02.23 - Adapter (0) | 2012.02.23 |
| [ANDROID] 12.02.22 - 키보드관리,이미지크기,라디오버튼 (0) | 2012.02.22 |
