구글맵 - 레이어

레이어 개요

레이어는 하나 이상의 별도의 항목으로 이루어져지도에서 개체가 있지만 하나의 단위로 조작됩니다. 레이어는 일반적으로 당신이 일반적인 연결을 지정지도 위에 추가하는 개체의 컬렉션을 반영합니다. 지도 API 하나의 객체 (일반적으로 타일 오버레이)에 자신의 구성 항목을 렌더링하고지도의 뷰포트가 변경되면이를 표시하여 레이어 내에서 개체의 프레 젠 테이션을 관리합니다. 레이어는 또한 약간 레이어와 일치하는 방식으로 기본 타일을 변경,지도 자체의 프레 젠 테이션 계층을 변경할 수 있습니다. 대부분의 레이어는, 디자인에 의해, 그들의 개별 개체를 통해 액세스할 수 없습니다,하지만 단위로 조작할 수 있습니다.

지도 레이어를 추가하려면, 당신은 전화를해야 setMap ()을 레이어를 표시하는 그것을지도 개체를 전달합니다. 마찬가지로, 레이어를 숨기려고, 전화 setMap ()을 통과, null을 .

지도 API는 레이어의 몇 가지 유형이있다 :

• KmlLayer의 개체는지도 API V3 타일 오버레이로 KML 및 GeoRSS 요소를 렌더링합니다.
• FusionTablesLayer의 개체는 구글에 포함된 데이터를 렌더링 퓨전 테이블을 .
• TrafficLayer의 개체는 트래픽을 대표하는 교통 조건과 오버레이를 묘사 레이어를 렌더링.
• WeatherLayer 와 CloudLayer 개체를 사용하면지도에 일기 예보와 구름 이미지를 추가할 수 있습니다.
• BicyclingLayer의 개체는 일반 층에 자전거 도로 및 / 또는 자전거 전용 오버레이 레이어를 렌더링. 이 계층은 안에 기본적으로 반환되는DirectionsRenderer 여행 모드의 방향 요청할 때 자전거를 .
• PanoramioLayer의 개체에서 사진 추가 Panoramio에 레이어로서합니다.
• DemographicsLayer의 개체는 레이어로서 미국 인구 통계 학적 정보를 렌더링하고, 오직 비즈니스 고객을위한 Google지도 API를 이용하실 수 있습니다. 그것은 안에 포함된 시각화 라이브러리.

이러한 레이어는 아래에 설명되어 있습니다. 인구 통계 계층은에서 설명하는 인구 통계 계층 비즈니스 문서를위한 Google지도 API의 장.

KML 및 GeoRSS 레이어

구글 맵스 API는 지리 정보를 표시하기위한 KML 및 GeoRSS 데이터 형식을 지원합니다. 이러한 데이터 형식을 사용하여지도에 표시되는 KmlLayer의 생성자를 공개적으로 액세스할 수있는 KML 또는 GeoRSS 파일의 URL 걸립 객체.

읽어주십시오 KML 지원 지원 요소와 크기 및 복잡도 제한에 대한 자세한 내용은 KML 문서에 페이지를.

지도 API는 V3 타일 오버레이를 사용하여지도에 표시되는 KML 표현으로 제공되는 지리적인 XML 데이터를 변환합니다. 이 KML은 낯이 V3 오버레이 요소처럼 (그리고 다소 동작) 보입니다. KML <Placemark> 과 GeoRSS의 포인트 요소가 마커로 렌더링됩니다 예를 들어, <LineString>의 요소가 폴리 라인과 같이 렌더링됩니다 <Polygon>의 요소는 다각형으로 렌더링됩니다. 마찬가지로, <GroundOverlay>의 요소지도에 사각형 이미지로 렌더링됩니다. 중요한 것은 그러나, 이러한 개체들은 아니 Google지도 API 마커 초, 폴리 라인 의, 다각형 s 또는 GroundOverlay 제품 들 대신, 그들은지도에서 하나의 개체로 렌더링됩니다.

KmlLayer 제품 들은 일단 개체가지도에 나타 맵 속성이 설정되었습니다. (당신은 전화하여지도에서 제거할 수 있습니다 setMap () 패스 null을 .) KmlLayer의객체가 자동으로지도의 주어진 범위에 대해 적절한 기능을 검색하여 해당 자식 요소의 렌더링을 관리합니다. 범위 변경으로 현재 뷰포트의 기능은 자동으로 렌더링됩니다.

내의 구성 요소가 있기 때문에 KmlLayer이 수요에 렌더링되는, 레이어를 쉽게 마커, 폴리 라인, 그리고 다각형 수천명의 렌더링을 관리할 수 있습니다. 그들은 각각 이러한 개별 개체에 대한 데이터를 반환하는 클릭 이벤트를 제공하지만, 직접 이러한 구성 개체에 액세스할 수 없습니다.

KML 레이어 옵션

KmlLayer () 생성자는 선택의 수를 전달 KmlLayerOptions를 :

• 지도 지정 맵 렌더링하는에 KmlLayer을 . 당신은 숨길 수 KmlLayer를 하기 위해이 값을 설정하여 null로 내에 setMap () 방식입니다.
• preserveViewport는 지도가의 범위를 조정하지 말아야한다고 규정 KmlLayer 레이어를 보여주는 경우의 콘텐츠입니다. 기본적으로 표시할 때KmlLayer을 ,지도가 확대된하고 레이어 내용의 전체를 표시하기 위해 위치하고 있습니다.
• suppressInfoWindows는 이내 클릭할 수있는 기능을 나타냅니다 KmlLayer가 의 표시 트리거하지 말아야 InfoWindow의 개체를.

일단 또한 KmlLayer가 렌더링되는, 그것은 불변가 포함된 메타 데이터 레이어의 이름, 설명, 미리보기 그리고 이내 저자가 포함된 재산 KmlLayerMetadata의 리터럴 개체를. 당신은이 정보를 사용하여 조사할 수 getMetadata () 메소드를. 의 렌더링 때문에 KmlLayer의 개체가 외부 서버에 비동기 통신을 필요로, 당신은을 수신하고 싶지 않습니다 metadata_changed 속성이 채워집되었음을 나타냅니다 이벤트.

다음 예제는 구성하고 KmlLayer 주어진 GeoRSS 피드의를 :

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);

GeoRSS 예제 (레이어 georss.html)를보기

다음 예제는 구성하고 KmlLayer 주어진 KML 피드의를 :

var myLatlng = new google.maps.LatLng(41.875696,-87.624207);
var myOptions = {
  zoom: 11,
  center: myLatlng,
  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);

보기 KML 예제 (레이어 kml.html)

KML 기능 상세

KML이 기능을 다수 포함될 수 있기 때문에, 당신의 기능은 데이터에 액세스할 수 없습니다 KmlLayer의 직접 개체를. 기능이 표시되는대로 대신, 그들은 클릭할 수지도 API를 오버레이처럼 보이기 렌더링됩니다. 개별 기능을 클릭하면, 기본적으로 나타납니다 InfoWindow KML이 들어 <TITLE> 및 <description>의 특정 기능에 대한 정보. 또한 KML 기능에 대한 클릭이 발생 KmlMouseEvent 다음과 같은 정보를 전달합니다 :

• 위치는 앵커로되는 위도 / 경도 좌표를 나타냅니다 InfoWindow 이 KML 기능에 대한합니다. 이 자세는 일반적으로 다각형, 폴리 라인, 그리고 GroundOverlays위한 클릭한 위치에 있지만, 마커에 대한 진정한 근원이다.
• pixelOffset는 위에서 오프셋 나타내는 위치에 앵커로 InfoWindow "꼬리." 다각형 객체의 경우이 오프셋은 일반적으로 0,0 하지만 마커에 대한 마커의 높이를 포함합니다.
• featureData은 의 JSON 구조가 들어 KmlFeatureData을 .

샘플 KmlFeatureData의 객체는 다음과 같습니다 :

{ 
  작성자 :  { 
    이메일 :  "nobody@google.com ' , 
    이름 :  "미스터
 
  
 
 
 
 
 

다음 예제는 KML 기능 표시 <Description>의 측면 내에서 텍스트를 <DIV> 기능을 클릭했을 때 :

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});
nyLayer.setMap(map);
google.maps.event.addListener(nyLayer, 'click', function(kmlEvent) {
  var text = kmlEvent.featureData.description;
  showInDiv(text);
});

function showInDiv(text) {
  var sidediv = document.getElementById('contentWindow');
  sidediv.innerHTML = text;
}

보기 KML 예제 (레이어 KML-features.html 페이지)

퓨전 테이블 항목 (실험)

Google지도 API는 구글에 포함된 데이터를 렌더링할 수있는 퓨전 테이블 을 사용하여지도 계층으로서 FusionTablesLayer의 개체를. 구글 퓨전 테이블은 각 행이 특정 기능에 대한 데이터가 포함된 데이터베이스 테이블이다; 지리 데이터, 구글 퓨전 테이블 내의 각 행을가 추가로 포함하고 위치 데이터를 기능의 위치 정보를 들고. FusionTablesLayer은 퓨전 테이블에 인터페이스를 제공하며, 기능의 추가로 데이터를 표시하는 클릭 가능한 오버레이를 제공하고,이 위치 데이터를 자동으로 렌더링을 지원합니다.

지리적 데이터를 보여주는 샘플 퓨전 표는, 다음과 같습니다 :

제한

당신은지도 대 5 퓨전 테이블 레이어를 추가할 수 있도록지도 API를 사용하여 한 다섯 스타일링 규칙으로 함께 스타일을 할 수 있습니다.

: 또한

• 테이블에있는 데이터의 첫 번째 100000 행이 쿼리 결과에 매핑하거나 포함됩니다.
• 공간적 predicates있는 쿼리는이 첫 번째 100,000 행 사이에서 데이터를 반환합니다. 당신이 첫 번째 100K 후 매우 큰 테이블과 행을 필터 일치하는 데이터에 필터를 적용하는 경우 따라서, 이러한 행이 표시되지 않습니다.
• 데이터를 가져오기 또는 삽입하면, 기억 :
  • 한 API 호출에서 보낸 데이터의 총 크기는 1MB를 초과할 수 없습니다.
  • 퓨전 테이블의 데이터 셀에 1,000,000 문자 최대를 지원 가끔 좌표의 정밀도를 감소 또는 다각형이나 라인 설명을 단순화하기 위해 필요할 수 있습니다.
  • 테이블 당 지원되는 정점의 최대 개수는 5 만명입니다.
• 지도를보고하면 나타날 수 있습니다 :
  • 멀티 기하학의 10 대-영역 구성 요소가 표시됩니다.
  • 멀리 밖으로 확대된 경우, 500 개 이상의 기능을 가진 테이블은 점 (안 선 또는 다각형)가 표시됩니다.

퓨전 테이블 설정

퓨전 테이블은 지리 데이터 지원을 기본적으로 제공하는 데이터 테이블입니다. 퓨전 테이블에 대한 전체 설명서가에 위치한 퓨전 테이블 개발자 안내서 . 구글지도 API 내에서 데이터를 표시하기 위해 퓨전 테이블 계층의 경우, 테이블은 다음과 같은 기준을 만족해야합니다 :

• 테이블이 있어야 공유 로 공개 또는 비공개 .
• 테이블로 노출 하나 이상의 열에 있어야합니다 위치 . 에서는 퓨전 테이블 웹 인터페이스 선택 > 편집을 열 수정 하고 원하는 컬럼 (들)을 선택합니다.

위치 열은 아래 서식 요구 사항을 따라야합니다.

• 위도 / 경도 좌표가 하나의 열에 입력할 수, 쉼표 (분리 위도 , 경도 ), 또는 두 개의 컬럼 (하나 위도에 대한 열의와 경도에 대해 하나)에 걸쳐 분할 수있다. 자세한 내용을 참조 나는 위치 정보를 가지고있는 열을 지정하려면 어떻게해야합니까? 구글 퓨전 테이블의 센터를 도와줍니다.
• 주소는 첫번째 코드 화됨해야합니다. 퓨전 테이블 웹 인터페이스에서 선택한 파일> 위치 정보 지정을 .
• KML을 기하 데이터 와 같은 점, 선, 그리고 다각형 등이 지원됩니다.

FusionTables 계층을 구축

FusionTablesLayer의 생성자는 테이블의 고유 ID를 사용하여 공용 퓨전 테이블에서 레이어를 만듭니다. 이 ID는 선택하여 찾을 수 있습니다 대하여 파일>을퓨전 테이블 UI에서.

지도로 퓨전 테이블 레이어를 추가하려면, 합격, 레이어를 만들려면 쿼리 는 다음과 개체를 :

• 의 값이 테이블의 ID입니다 속성입니다.
• 선택 값이 속성은 위치 정보를 포함하는 열 이름입니다. 당신은 따옴표를 사용해야 하는 열 공백을 포함할 이름, 주위 예약어 , 또는 문자로 시작하지 않습니다.

그런 다음 레이어의 설정 지도를 귀하에게 지도 다른 오버레이와 마찬가지로 개체.

다음 예제는 공공 퓨전 테이블을 사용하여 2009 년 시카고 내의 살인 사건을 보여줍니다 :

  

  

 
 


 
 
     주소 ' , 
    에서 :  '139529 ' 
  } 
}); 
계층 . setMap ( 지도 );

보기 퓨전 테이블 예제 (레이어 fusiontables-simple.html)

퓨전 테이블 쿼리

퓨전 테이블 또한 지정된 기준으로 설정된 결과를 제한 수있는 강력한 쿼리를 적용할 수 있습니다. 쿼리를 사용하여 지정됩니다 FusionTablesLayerOptions의쿼리 매개 변수를 :

검색어 :  { 
  선택 :  locationColumn , 
  에서 :  fusionTableID , 
  위치 :  constraintClause
 }

어디 locationColumn 형식의 기존 코드 화됨 컬럼입니다 위치 . 당신은 따옴표를 사용해야합니다 에 열 이름 주위에 선택 하거나 공백을 포함할 필드, 예약어, 또는 그 문자로 시작하지 않습니다.

지원되는 검색 연산자가 나열되어 있습니다 퓨전 테이블 설명서 .

다음 예제는 5,000 위 평일 ridership 있었 CTA의 레드 라인을 따라 위치를 표시합니다

  

  

 
 


 
 
     
     
     > 5000 ' 
  } 
}); 
계층 . setMap ( 지도 );

보기 퓨전 테이블 예제 (레이어 fusiontables-query.html)

퓨전 테이블 스타일

퓨전 테이블 계층 생성자도 허용 FusionTablesLayerOptions의 스타일에 색상을 적용하는 매개 변수, 뇌졸중 무게, 선 및 다각형에 대한 투명도를. 마커 아이콘도 지원에서 지정할 수있는 지도 표시 또는 아이콘 이름 .

스타일은지도마다 하나의 퓨전 테이블 계층에 적용할 수 있습니다. 그 레이어를 다섯 스타일까지 적용될 수 있습니다.

스타일 매개 변수는 다음과 같은 구문을 사용합니다 :

styles: [{
  where: 'column_name condition',
  markerOptions: {
    iconName: "supported_icon_name"
  },
  polygonOptions: {
    fillColor: "#rrggbb",
    strokeColor: "#rrggbb",
    strokeWeight: "int"
  },
  polylineOptions: {
    strokeColor: "#rrggbb",
    strokeWeight: "int"  }
}, {
  where: ...
  ...
}]

스타일은 퓨전 테이블 웹 인터페이스에서 지정된 않은 스타일링의 상단에 적용됩니다. 레이어 생성자에 제공된 스타일은 다음 마지막으로 일치하는 스타일을 복용 여러 규칙이 일치하는 모든 기능과 함께, 그들이 나열하는 순서대로 적용됩니다.

모든 기능에 적용할 기본 스타일을 만들려면없이 스타일을 만들 위치의 조항 :

스타일 :  [{ 
  markerOptions :  { 
    iconName :  "large_green" 
  } 
}]

다음 예제는 보여준다 :

• 기본 스타일 그 0.3 투명도 수준 색상은 모든 다각형 녹색.
• 누구의 '조류'항목이 300을 초과하는 모든 다각형 색 파란색입니다. 그들은 기본 스타일 정한 불투명도 수준을 유지합니다.
• 그의 '인구'항목이 5 그들 불투명도 수준 1.0에서 설정이 초과하는 모든 다각형. 그들은 fillColor 값을 유지합니다.

  

  

 



 
 
     
     
  
 
 
 
 
    
   
     > 300 " , 
    polygonOptions :  { 
      fillColor :  "# 0000FF" 
    } 
  }  { 
    위치 :  "인구> 5" , 
    polygonOptions :  { 
      fillOpacity :  1.0 
    } 
  }] 
}); 
계층 . setMap ( 지도 );

보기 퓨전 테이블 예제 (레이어 fusiontables-styling.html)

퓨전 표 Heatmaps

퓨전 테이블은 또한을 위해 제한된 지원을 제공 히트지도 와 일치하는 위치의 밀도가 색상 팔레트를 사용하여이 그려져 있습니다. 현재 heatmaps은 관련 지역의 상대적 유행을 나타내기 위해 빨간색 (고밀도)에 녹색 (스파스) 그라데이션을 사용합니다. 당신은 레이어의 설정하여 히트맵를 활성화FusionTablesLayerOptions의 히트맵 서비스 에 매개 변수를 사실 : 사용 가능 .

다음 예제는 열지도를 사용하는 브라질의 해안에 지정된 해변을 보여줍니다 :

var brazil = new google.maps.LatLng(-18.771115, -42.758789);

map = new google.maps.Map(document.getElementById('map_canvas'), {
  center: brazil,
  zoom: 5,
  mapTypeId: google.maps.MapTypeId.ROADMAP
});

layer = new google.maps.FusionTablesLayer({
  query: {
    select: 'LATITUDE',
    from: '136705'
  },
  heatmap: {
    enabled: true
  }
});
layer.setMap(map);

보기 퓨전 테이블 예제 (레이어 fusiontables-heatmap.html)

교통 층

Google지도 API는 사용하여지도에 실시간 교통 정보 (지원되는 위치)을 추가할 수 있습니다 TrafficLayer의 개체를. 교통 정보는 요청이되는 시간이 제공됩니다. 상담 이 스프레드 쉬트 트래픽 취재 지원을 결정합니다.

var myLatlng = new google.maps.LatLng(34.04924594193164, -118.24104309082031);
var myOptions = {
  zoom: 13,
  center: myLatlng,
  mapTypeId: google.maps.MapTypeId.ROADMAP
}

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

var trafficLayer = new google.maps.TrafficLayer();
trafficLayer.setMap(map);

교통 예제 (레이어 traffic.html)를보기

자전거 층

Google지도 API는 사용하여지도에 자전거 정보를 추가할 수 있습니다 BicyclingLayer의 개체를. BicyclingLayer는 , 자전거 도로의 레이어를 렌더링 주어진지도 위에 자전거 사용량에 맞는 자전거 노선과 다른 오버레이를 제안했습니다. 또한 레이어는 자전거에 대한 부적 절한 자전거 노선과 드 강조 거리를 지원하는 거리를 강조하기 위해 기본지도 자체의 스타일을 바꿀지도 모르겠어.

다음 예제는 케임 브리지, MA의지도 활성화 자전거 계층을 보여줍니다 :

var myLatlng = new google.maps.LatLng(42.3726399, -71.1096528);
var myOptions = {
  zoom: 14,
  center: myLatlng,
  mapTypeId: google.maps.MapTypeId.ROADMAP
}

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

var bikeLayer = new google.maps.BicyclingLayer();
bikeLayer.setMap(map);

어두운 녹색 노선 전용 자전거 노선을 지적했다. 밝은 녹색 노선 전용으로 거리를 나타내는 "자전거 차선." 점선 노선 거리하거나 자전거 사용을 권장 경로를 나타냅니다.

보기 예제 (레이어 bicycling.html)

날씨와 클라우드 레이어 (도서관)

이 섹션 개념에서만 사용할 수있는 기능을 참조 google.maps.weather의 도서관. 이 라이브러리는 당신이지도 자바 스크립트 API를 로드할 때 기본적으로로드되지 있지만 명시적으로 사용을 통해 지정해야합니다 라이브러리 부트 스트랩 매개 변수. 
참조 라이브러리 개요 자세한 정보를.

당신은을 통해지도에 날씨 데이터 또는 구름 이미지의 표시 활성화할 수 있습니다 WeatherLayer 및 CloudLayer google.maps.weather 라이브러리의 클래스를.구름 레이어를 사용하면, 여러분의지도 줌 레벨 6까지 0 보이는 구름 범위의 이미지를 추가합니다. 날씨 레이어를 사용하면에서 현재 날씨 상태를 표시합니다weather.com 태양, 구름, 비를 나타내는 등 아이콘을 포함하여지도에. 특정 지역에 대한 날씨 아이콘을 클릭하면 같은 현재의 습도와 바람 상태뿐만 아니라 4 일간의 일기 예보와 같은 상세한 데이터와 정보 창이 열립니다. 당신은을 통해이 상세한 데이터에 액세스할 수 featureDetails 제품 의 속성WeatherMouseEvent의 개체. 아래 예제는 아이콘을 클릭하면 검색하고 해당 위치의 현재 온도를 표시합니다.

구글 . 지도 . 행사 . addListener ( weatherLayer ,  '클릭' ,  기능 ( 전자 )  { 
  알림 ( '시 현재 기온'  + E . featureDetails . 위치 +  '입니다' 
        + E . featureDetails . 현재 . 온도 +  '도.' ); 
});

함께 WeatherLayerOptions의 객체 당신은 정보 창을 사용하지 않도록 날씨 레이어에 표시되는 레이블의 색상을 구성하고 온도 (도 섭씨 또는 화씨) 및 풍속 (kmh, mph, 또는 m / s를 표시하는 데 사용할 단위를 사용자 정의할 수 있습니다 ).

날씨 레이어가 활성화되어 줌 레벨이 12 이하로 설정하면 이러한 거리 또는 지역의 이름과 같은 관리 라벨은, 당신의지도에서 비활성화됩니다. 줌 레벨 13에서 날씨 레이어는 자동으로 비활성화되어 행정 레이블이 복원됩니다.

아래 예제는 구름과 날씨 레이어를 활성화하고, 기본 단위를 화씨하도록 설정합니다.

var myOptions = {
  zoom: 6,
  center: new google.maps.LatLng(49.265984,-123.127491),
  mapTypeId: google.maps.MapTypeId.ROADMAP
};

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

var weatherLayer = new google.maps.weather.WeatherLayer({
  temperatureUnits: google.maps.weather.TemperatureUnit.FAHRENHEIT
});
weatherLayer.setMap(map);

var cloudLayer = new google.maps.weather.CloudLayer();
cloudLayer.setMap(map);

(레이어 weather.html) 기상 예보기

Panoramio에 레이어 (도서관)

이 섹션 개념에서만 사용할 수있는 기능을 참조 google.maps.panoramio의 도서관. 이 라이브러리는 당신이지도 자바 스크립트 API를 로드할 때 기본적으로로드되지 있지만 명시적으로 사용을 통해 지정해야합니다 라이브러리 부트 스트랩 매개 변수. 참조 라이브러리 개요 자세한 정보를.

PanoramioLayer 개체를 사용

당신의 사진을 추가할 수 있습니다 Panoramio에 사용하여지도에 레이어로 PanoramioLayer의 개체를. PanoramioLayer는 크고 작은 사진 아이콘 시리즈와 같은지도 Panoramio에 사진에서 태그가 지정된 아이콘의 레이어를 렌더링.

추가 하시려면 PanoramioLayer를 지도하려면 개체를 작성하고 그지도 속성을 설정합니다 :

VAR panoramioLayer =  새로운 구글 . 지도 . Panoramio에 . PanoramioLayer (); 
panoramioLayer . setMap ( 지도 );

기본적으로 Panoramio에 레이어 내에서 사진 아이콘을 클릭하면 큰 사진과 자세한 정보와 함께 정보 창이 나타납니다. 당신은 레이어의 설정하면이 기본 동작을 제거할 수 있습니다 suppressInfoWindows의 에 속성을 진실 . 당신이 처리에 의해 개인 Panoramio에 사진과 관련된 메타 데이터를 조사할 수있다 '를 클릭한 다음' 에서 이벤트를 PanoramioLayer 및 검사 PanoramioMouseEvent 자사에 대한 featureDetails의 속성을. 자신의 클릭 처리기를 구현하고 기본 정보 창을 표시하지 않는 경우 Panoramio에 사진의 사용을 준수해야합니다 서비스 Panoramio에 API 이용 하는 브랜딩 및 속성 요구 사항을 포함.

다음 예제는 시애틀, WA에 대한 Panoramio에 레이어를 보여줍니다. 사진 추가합니다에서 오른쪽 패널에서 Panoramio에 사진 페이지에 대한 링크 목록을 클릭하면

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);
});

보기 예제 (레이어 panoramio.html)

태그 또는 사용자 ID별로 사진을 제한

당신은에 표시할 사진의 집합을 제한할 수 있습니다 PanoramioLayer 특정 텍스트 태그를 일치 분들, 또는 특정 사용자에 맞는 사람들에게.

특정 태그의 사람에게 사진을 제한하려면 전화 setTag ()을 일에 PanoramioLayer의 개체. 레이어는지도의 뷰포트 내에서 해당 태그에 맞는 사진을 표시하도록 업데이 트됩니다. 특정 사용자들에게 사진을 제한하려면 전화 setUserId ()을 일에 PanoramioLayer의 개체.

다음 예제는 없음 태그를 필터링하고 뉴욕 항구의지도를 표시합니다. 입력 필드에 텍스트를 입력하면 사용하는 필터를 적용 setTag () 메소드를 :

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);
}

(레이어 Panoramio에-tags.html) 예제보기

Panoramio에 위젯 API를 사용

당신은 또한 사용할 수 있습니다 Panoramio에 위젯 API를 내에서 이미지를 표시하려면 PanoramioWidget의 개체. Panoramio에 API를 사용하려면 스크립트 태그를 통해 자바 스크립트 API를 별도로 해당 API에 대한 자바 스크립트 기호를로드해야합니다 :

<script type="text/javascript" src="http://www.panoramio.com/wapi/wapi.js?v=1">
</ SCRIPT>

Panoramio에의 PhotoWidget는 400 X 300 픽셀의 기본 크기를 가지고 있습니다. 당신이 표시하고 싶은 경우 PhotoWidget를 정보 창 내에서 여러분은이 기본 ​​크기를 사용하거나 내에 명시적으로 하나를 설정할 수 있습니다 PhotoWidget 의 생성자. 유의 PhotoWidget는 자사의 컨테이너 (이 경우에는 정보 창)에 따라 자동으로 자체 크기가되지 않습니다. 대신 위젯의 너비와 높이를 명시적으로 설정해야합니다.

다음 예제는 Panoramio에 이미지와 함께 정보 창을 채우는 Panoramio에 위젯 API를 사용합니다. 위젯은 쉽게 하나 이상의 이미지를 표시하도록 구성할 수 있습니다.

/ /이 예제 Panoramio에 위젯 API를 로드할 필요 
/ / http://www.panoramio.com/wapi/wapi.js?v=1을 통해 

/ / photoDiv가에 대한 정보 창 내에 DIV를 정의 
/ / Panoramio에 사진 표시 그 PhotoWidget 내에서. 
/ / 우리는 640의 정보 창의 최대 크기를 사용 

 
 

PhotoWidget 너비와 높이를 숫자 값으로 표현되며, 
/ / 문자열 값을 그래서 우리는 그들을 변하게 필요가 없습니다 
 
  
  


우리로 우리는 빈 (NULL) 요청과 함께 PhotoWidget을 구축 
/ / 아직 채울 수있는 사진은 없어요
  

  
 
 




 



 
 
 

 



   

   
  
            
  

(레이어 Panoramio에-widget.html) 예제보기