[웹지도] Google Map API 용어 정리

아래는 구글 지도 API를 통해 지도를 커스터마이징하고, 사용자 인터페이스를 개선하는 데 사용되는 기능과 개념을 설명합니다.

1. 윈포윈도우 (InfoWindow)
   • 설명: 지도에 특정 위치나 마커를 클릭했을 때 나타나는 정보 창. 이 창은 텍스트, 이미지, 링크 등의 다양한 정보를 표시할 수 있습니다.
   • 용도: 사용자에게 추가 정보를 제공하고, 지도 상의 특정 위치와 상호작용할 수 있게 합니다.
   • 예시 코드:

var infowindow = new google.maps.InfoWindow({
  content: "<div>Hello World!</div>"
});

var marker = new google.maps.Marker({
  position: { lat: -34.397, lng: 150.644 },
  map: map,
  title: "Hello World!"
});

marker.addListener("click", function() {
  infowindow.open(map, marker);
});

2.커스텀 오버레이 (Custom Overlay)

• 설명: 지도 위에 사용자가 정의한 그래픽이나 요소를 추가할 수 있는 기능. 기본 제공되는 마커나 오버레이 외에 특별한 커스터마이징이 가능합니다.
• 용도: 특정 데이터 시각화, 특수 마커 추가, 사용자 상호작용 요소 배치 등.
• 예시 코드

var infowindow = new google.maps.InfoWindow({ content: "<div>Hello World!</div>" }); var marker = new google.maps.Marker({ position: { lat: -34.397, lng: 150.644 }, map: map, title: "Hello World!" }); marker.addListener("click", function() { infowindow.open(map, marker); });

3.overlayLayer

• 설명: 커스텀 오버레이를 지도에 추가할 때 사용하는 기본 레이어. 지도 상의 다른 요소들과 동일한 깊이로 오버레이를 표시합니다.
• 용도: 기본 오버레이 요소를 배치하는 데 사용됩니다.

4.overlayImage

설명: 지도에 큰 이미지나 특정 영역을 덮는 이미지를 오버레이로 추가할 때 사용. GroundOverlay 클래스를 통해 주로 구현됩니다

용도: 이미지 오버레이를 추가하여 특정 지역을 강조하거나 특별한 그래픽을 표시합니다.

예시 코드

var imageBounds = { north: 62.400471, south: 62.281819, east: -150.005608, west: -150.287132 }; var historicalOverlay = new google.maps.GroundOverlay( 'https://www.lib.utexas.edu/maps/historical/newark_nj_1922.jpg', imageBounds ); historicalOverlay.setMap(map);

 

5.floatPane

설명: 다른 레이어들보다 높은 우선순위를 가지며, 주로 정보창(윈포윈도우)과 같은 UI 요소를 표시할 때 사용. 이 레이어에 추가된 요소는 지도 상의 다른 모든 요소 위에 표시됩니다.

용도: 지도 상의 최상위 레이어에 중요한 UI 요소를 표시합니다.

var infowindow = new google.maps.InfoWindow({ content: "<div>Hello World!</div>" }); var marker = new google.maps.Marker({ position: { lat: -34.397, lng: 150.644 }, map: map, title: "Hello World!" }); marker.addListener("click", function() { infowindow.open(map, marker); });

이 용어들은 구글 지도 API에서 지도에 다양한 시각적 요소를 추가하고 사용자와 상호작용할 수 있는 기능을 제공하는 데 사용됩니다. 각 용어와 기능을 이해하면 구글 지도 API를 보다 효과적으로 사용할 수 있습니다.