[Map] 12.03.14 - Google Map - Overlays 2 :: 너는 진정 전자인을 아는가?

[Map] 12.03.14 - Google Map - Overlays 2

2012. 3. 14. 00:47 아래로가기

---------------------------------------------------------------------------------

<%@ page contentType="text/html; charset=EUC-KR" pageEncoding="EUC-KR"%>

<% request.setCharacterEncoding("EUC-KR"); %>

// 플리커에서 사진을 올린것을 받아서 지도에 표시

<!DOCTYPE html>

<head>

<title>Google Maps JavaScript API v3 예제: KmlLayer GeoRSS</title>

function initialize() {

var myLatlng = new google.maps.LatLng(49.496675,-102.65625);

var myOptions = {

zoom: 4,

center: myLatlng,

mapTypeId: google.maps.MapTypeId.ROADMAP

}

var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

var georssLayer = new google.maps.KmlLayer('http://api.flickr.com/services/feeds/geo/?g=322338@N20&lang=en-us&format=feed-georss');

georssLayer.setMap(map);

}

</script>

</head>

</body>

</html>

-- 결과 : 마커클릭시 내용표시

---------------------------------------------------------------------------------

<%@ page contentType="text/html; charset=EUC-KR" pageEncoding="EUC-KR"%>

<% request.setCharacterEncoding("EUC-KR"); %>

// 지도에 난 길을 따라 선을 그린다. xml에 있는 내용

<!DOCTYPE html>

<head>

<title>Google Maps JavaScript API v3 예제: KmlLayer KML</title>

function initialize() {

var chicago = new google.maps.LatLng(35.174444, 129.078888);

var myOptions = {

zoom: 4,

center: chicago,

mapTypeId: google.maps.MapTypeId.ROADMAP

}

var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

var ctaLayer = new google.maps.KmlLayer('http://gmaps-samples.googlecode.com/svn/trunk/ggeoxml/cta.kml');

ctaLayer.setMap(map);

}

</script>

</head>

</body>

</html>

-- 결과 : 도로를 따라 선을 그린다.

---------------------------------------------------------------------------------

<%@ page contentType="text/html; charset=EUC-KR" pageEncoding="EUC-KR"%>

<% request.setCharacterEncoding("EUC-KR"); %>

KML에는 방대한 양의 지형지물이 포함될 수 있으므로 KmlLayer

객체에서 직접 지형지물 데이터에 액세스하지 못할 수 있습니다.

대신 지형지물이 표시될 때 클릭 가능한 Maps API 오버레이처럼 보이도록 렌더링됩니다.

기본적으로 개별 지형지물을 클릭하면 지정된 지형지물에 대한 KML <title> 및 <description>

정보가 포함된 InfoWindow이 나타납니다. 또한 KML 지형지물을 클릭하면 KmlMouseEvent가

생성되어 다음과 같은 정보를 전달합니다.

position은 이 KML 지형지물에 대한 InfoWindow를 고정하기 위한 위도/경도 좌표를 나타냅니다.

이 위치는 일반적으로 폴리곤, 폴리라인 및 GroundOverlay에 대해 클릭된 위치이지만 마커의

실제 원점입니다.

pixelOffset은 InfoWindow '꼬리(tail)'를 고정하기 위한, 위 position으로부터의 오프셋을

나타냅니다. 폴리곤 객체의 경우 이 오프셋은 대개 0,0이지만 마커의 경우 마커의 높이가 포함됩니다.

featureData는 KmlFeatureData의 JSON 구조를 포함합니다.

이것또한 같은 유형 11과

<!DOCTYPE html>

<head>

<title>Google Maps JavaScript API v3 예제: KmlLayer KML 기능</title>

function initialize() {

var myLatlng = new google.maps.LatLng(40.65, -73.95);

var myOptions = {

zoom: 12,

center: myLatlng,

mapTypeId: google.maps.MapTypeId.ROADMAP

};

var map = new google.maps.Map(

document.getElementById("map_canvas"),

myOptions);

var nyLayer = new google.maps.KmlLayer(

'http://www.searcharoo.net/SearchKml/newyork.kml',

{ suppressInfoWindows: true,

map: map});

google.maps.event.addListener(nyLayer, 'click', function(kmlEvent) {

var text = kmlEvent.featureData.description;

showInContentWindow(text);

});

function showInContentWindow(text) {

var sidediv = document.getElementById('content_window');

sidediv.innerHTML = text;

}

</script>

</head>

</body>

</html>

-- 결과 : 파랑색 마커클릭시 내용이 출력된다.

---------------------------------------------------------------------------------

<%@ page contentType="text/html; charset=EUC-KR" pageEncoding="EUC-KR"%>

<% request.setCharacterEncoding("EUC-KR"); %>

Fusion Tables는 기본적으로 제공되는 지리적 데이터 지원을 제공하는 데이터 테이블입니다.

Fusion Tables에 대한 모든 문서는 Fusion Tables 개발자 가이드에 있습니다.

Fusion Tables 레이어가 Google 지도에 API의 데이터를 표시하려면 테이블이 다음 기준을 충족해야 합니다.

테이블을 공개로 공유해야 합니다(뷰어를 사용하는 것이 좋음).

테이블에 Location으로 표시된 열이 하나 이상 있어야 합니다. Fusion Tables에서

수정 > 열 수정을 선택하고 원하는 열을 선택합니다.

Location 열의 유효한 콘텐츠는 다음과 같습니다.

위도/경도 좌표는 위도와 경도에 각각 한 개의 열을 사용해야 합니다.

주소는 먼저 지오코딩되어야 합니다. Fusion Tables 웹 인터페이스에서 파일 >

지오코딩을 선택합니다.

점, 선, 폴리곤 등의 KML 기하 데이터가 지원됩니다.

점으로 지도에 표시

<!DOCTYPE html>

<head>

<title>Google Maps JavaScript API v3 예제: Fusion Tables 레이어</title>

function initialize() {

var chicago = new google.maps.LatLng(41.850033, -87.6500523);

map = new google.maps.Map(document.getElementById('map_canvas'), {

center: chicago,

zoom: 11,

mapTypeId: 'roadmap'

});

layer = new google.maps.FusionTablesLayer({

query: {

select: 'Geocodable address',

from: '139529'

}

});

layer.setMap(map);

}

</script>

</head>

</body>

</html>

-- 결과 : 점으로 된 내용 클릭시 내용출력

---------------------------------------------------------------------------------

<%@ page contentType="text/html; charset=EUC-KR" pageEncoding="EUC-KR"%>

<% request.setCharacterEncoding("EUC-KR"); %>

Fusion Tables는 기본적으로 제공되는 지리적 데이터 지원을 제공하는 데이터 테이블입니다.

Fusion Tables에 대한 모든 문서는 Fusion Tables 개발자 가이드에 있습니다.

Fusion Tables 레이어가 Google 지도에 API의 데이터를 표시하려면 테이블이 다음 기준을 충족해야 합니다.

테이블을 공개로 공유해야 합니다(뷰어를 사용하는 것이 좋음).

테이블에 Location으로 표시된 열이 하나 이상 있어야 합니다. Fusion Tables에서

수정 > 열 수정을 선택하고 원하는 열을 선택합니다.

Location 열의 유효한 콘텐츠는 다음과 같습니다.

위도/경도 좌표는 위도와 경도에 각각 한 개의 열을 사용해야 합니다.

주소는 먼저 지오코딩되어야 합니다. Fusion Tables 웹 인터페이스에서 파일 >

지오코딩을 선택합니다.

점, 선, 폴리곤 등의 KML 기하 데이터가 지원됩니다.

점으로 지도에 표시

<!DOCTYPE html>

<head>

<title>Google Maps JavaScript API v3 예제: Fusion Tables 레이어</title>

function initialize() {

var chicago = new google.maps.LatLng(41.850033, -87.6500523);

map = new google.maps.Map(document.getElementById('map_canvas'), {

center: chicago,

zoom: 11,

mapTypeId: 'roadmap'

});

layer = new google.maps.FusionTablesLayer({

query: {

select: 'Geocodable address',

from: '139529'

}

});

layer.setMap(map);

}

</script>

</head>

</body>

</html>

-- 결과 : 쿼리문 이용

---------------------------------------------------------------------------------

<%@ page contentType="text/html; charset=EUC-KR" pageEncoding="EUC-KR"%>

<% request.setCharacterEncoding("EUC-KR"); %>

/* 맵에 사진을 출력한다. */

<!DOCTYPE html>

<head>

<title>Google Maps JavaScript API v3 예제: Panoramio 레이어</title>

function initialize() {

var fremont = new google.maps.LatLng(47.651743, -122.349243);

var myOptions = {

zoom: 16,

center: fremont,

mapTypeId: google.maps.MapTypeId.ROADMAP

};

var map = new google.maps.Map(

document.getElementById("map_canvas"),

myOptions);

var panoramioLayer = new google.maps.panoramio.PanoramioLayer();

panoramioLayer.setMap(map);

google.maps.event.addListener(panoramioLayer, 'click', function(event) {

var photoDiv = document.getElementById('photoPanel');

var attribution = document.createTextNode(event.featureDetails.title +

": " + event.featureDetails.author);

var br = document.createElement("br");

var link = document.createElement("a");

link.setAttribute("href", event.featureDetails.url);

link.appendChild(attribution);

photoDiv.appendChild(br);

photoDiv.appendChild(link);

});

}

</script>

</head>

</body>

</html>

-- 결과 : panoramio의 저장된 사진을 뽑아온다.

---------------------------------------------------------------------------------

<%@ page contentType="text/html; charset=EUC-KR" pageEncoding="EUC-KR"%>

<% request.setCharacterEncoding("EUC-KR"); %>

PanoramioLayer에 표시할 사진 집합을 일부 텍스트 태그 또는 특정 사용자와 일치하는

사진으로 제한할 수 있습니다.

특정 태그가 지정된 사진으로 사진을 제한하려면 PanoramioLayer 객체에서 setTag()를

호출합니다. 레이어는 지도의 뷰포트에서 해당 태그와 일치하는 사진만 표시하도록 업데이트됩니다.

특정 사용자의 사진으로 사진을 제한하려면 PanoramioLayer 객체에서 setUserId()를 호출합니다.

다음 예는 태그 필터링을 사용하지 않은 뉴욕 항구의 지도를 표시합니다. 입력 필드에 텍스트를 입력하면

setTag() 메소드를 사용하여 필터가 적용됩니다.

<!DOCTYPE html>

<head>

<title>Google Maps JavaScript API v3 예제: Panoramio 레이어 태그</title>

var panoramioLayer;

function initialize() {

var nyHarbor = new google.maps.LatLng(40.693134, -74.031028);

var myOptions = {

zoom: 15,

center: nyHarbor,

mapTypeId: google.maps.MapTypeId.ROADMAP

};

var map = new google.maps.Map(

document.getElementById("map_canvas"),

myOptions);

panoramioLayer = new google.maps.panoramio.PanoramioLayer();

panoramioLayer.setMap(map);

}

function getTaggedPhotos() {

var tagFilter = document.getElementById('tag').value;

panoramioLayer.setTag(tagFilter);

}

</script>

</head>

</div>

</div>

</body>

</html>

-- 결과 : 필터의 기능이 있다.

---------------------------------------------------------------------------------

<%@ page contentType="text/html; charset=EUC-KR" pageEncoding="EUC-KR"%>

<% request.setCharacterEncoding("EUC-KR"); %>

Panoramio Widget API를 사용하여 PanoramioWidget 객체에 이미지를 표시할 수

있습니다. Panoramio API를 사용하려면 스크립트 태그를 통해 Javascript API와는

별도로 해당 API의 자바스크립트 기호를 로드해야 합니다.

</script>

Panoramio PhotoWidget의 크기는 400x300픽셀(기본)입니다.

정보창에 PhotoWidget을 표시하려면 이 기본 크기를 사용하거나 PhotoWidget의

생성자에 명시적으로 크기를 설정할 수 있습니다. PhotoWidget은 컨테이너(이 경우 정보창)를

기준으로 자동으로 자체 크기를 조정하지 않습니다. 대신 위젯의 너비와 높이를 명시적으로 설정해야 합니다.

<!DOCTYPE html>

<head>

<title>Google Maps JavaScript API v3 예제: Panoramio 레이어</title>

function initialize() {

// The photoDiv defines the DIV within the info window for

// displaying the Panoramio photo within its PhotoWidget.

// We use the info window's maximum size of 640 px.

var photoDiv = document.createElement("div");

photoDiv.style.width = '640px';

photoDiv.style.height = '500px';

// The PhotoWidget width and height are expressed as number values,

// not string values, so we need to turn them into floats.

var photoWidgetOptions = {

'width': parseFloat(photoDiv.style.width),

'height': parseFloat(photoDiv.style.height)

};

// We construct a PhotoWidget here with a blank (null) request as we

// don't yet have a photo to populate it.

var photoWidget = new panoramio.PhotoWidget(photoDiv, null, photoWidgetOptions);

var monoLake = new google.maps.LatLng(37.973432, -119.093170);

var myOptions = {

zoom: 11,

center: monoLake,

mapTypeId: google.maps.MapTypeId.ROADMAP

};

var map = new google.maps.Map(

document.getElementById("map_canvas"),

myOptions);

var photoWindow = new google.maps.InfoWindow();

var panoramioOptions = {

suppressInfoWindows: true

}

var panoramioLayer = new google.maps.panoramio.PanoramioLayer(panoramioOptions);

panoramioLayer.setMap(map);

google.maps.event.addListener(panoramioLayer, 'click', function(event) {

var photoRequestOptions = {

ids: [{'photoId': event.featureDetails.photoId,

'userId': event.featureDetails.userId}]

}

photoWidget.setRequest(photoRequestOptions);

photoWidget.setPosition(0);

photoWindow.setPosition(event.latLng);

photoWindow.open(map);

photoWindow.setContent(photoDiv);

});

}

</script>

</head>

</body>

</html>

-- 결과 : 클릭시 큰화면 출력

---------------------------------------------------------------------------------

---------------------------------------------------------------------------------

'libray > Utill' 카테고리의 다른 글

JDK설치_및_이클립스_설치_환경_설정 (0)	2012.03.17
사이트 - 모바일웹 참고 (0)	2012.03.16
이클립스 WTP에서 Dynamic Web Project만들기 (0)	2012.01.19
[JAVA_JSP] - 12.01.16 - 설치 및 설정 (0)	2012.01.16
ID (0)	2011.12.22

너는 진정 전자인을 아는가?

[Map] 12.03.14 - Google Map - Overlays 2

'libray > Utill' 카테고리의 다른 글

+ Recent posts

티스토리툴바