모든 준비를 마쳤습니다!

개발을 시작하려면 개발자 문서로 이동하세요.

Google Maps JavaScript API 활성화

개발을 시작하기 위해 Google Developers Console에서 우선적으로 해야 할 일을 몇 가지 소개하겠습니다.

  1. 프로젝트 생성 또는 선택
  2. Google Maps JavaScript API 및 관련 서비스 활성화
  3. 적합한 키 생성
계속

정보 창

  1. 소개
  2. 정보 창 추가
  3. 정보 창 열기
  4. 정보 창 닫기
  5. 정보 창 이동

소개

InfoWindow는 주어진 위치에서 지도 위에 팝업 창으로 콘텐츠(일반적으로 텍스트 또는 이미지)를 표시합니다. 정보 창에는 콘텐츠 영역과 테이퍼형 스템이 있습니다. 스템의 끝은 지도의 지정된 위치와 연결됩니다.

일반적으로 정보 창은 마커에 연결되지만, 아래 정보 창 추가 섹션에 설명된 것처럼 특정 위도/경도에 연결할 수도 있습니다.

넓게 보면 정보 창은 오버레이의 일종입니다. 다른 유형의 오버레이에 관한 내용은 지도에 그리기를 참조하세요.

정보 창 추가

InfoWindow 생성자는 InfoWindowOptions 객체 리터럴을 취하며, 이 객체 리터럴은 정보 창을 표시하는 최초 매개변수를 지정합니다.

InfoWindowOptions 객체 리터럴은 다음 필드를 포함합니다.

  • content는 정보 창에 표시될 텍스트 문자열이나 DOM 노드를 포함합니다.
  • pixelOffset은 정보 창 끝에서 정보 창이 고정된 위치까지의 오프셋을 포함합니다. 사실 이 필드는 지정할 필요가 없습니다. 기본값으로 두어도 됩니다.
  • position은 이 정보 창이 고정되는 LatLng를 포함합니다. 참고: InfoWindow는 지정된 LatLng에서 Marker 객체(이 경우, 위치는 마커 위치를 기반으로 함) 또는 지도 자체에 연결될 수 있습니다. LatLng지오코딩 서비스를 사용하여 검색할 수 있습니다. 마커에서 정보 창을 열면 position이 자동으로 업데이트됩니다.
  • maxWidth는 정보 창의 최대 너비를 픽셀 단위로 지정합니다. 기본적으로, 정보 창은 콘텐츠에 맞게 확장되고 정보 창이 지도를 채울 경우 텍스트를 자동 줄바꿈합니다. maxWidth를 추가하면 정보 창이 지정된 너비로 강제로 자동 래핑합니다. 정보 창이 최대 너비에 도달하고 화면에서 세로 방향에 여유가 있으면, 정보 창이 세로로 확장될 수 있습니다.

InfoWindow의 콘텐츠에는 텍스트 문자열, HTML 스니펫 또는 DOM 요소가 포함될 수 있습니다. 콘텐츠를 설정하려면 InfoWindowOptions 내에서 지정하거나 InfoWindow에서 명시적으로 setContent()를 호출합니다.

콘텐츠 크기를 명시적으로 지정하고 싶다면, <div> 요소에 넣고 CSS로 <div>의 스타일을 지정합니다. CSS를 사용하여 스크롤을 활성화할 수도 있습니다. 스크롤을 활성화하지 않았는데 콘텐츠가 정보 창에서 사용 가능한 공간을 초과하면, 콘텐츠가 정보 창 밖에 표시될 수도 있습니다.

정보 창 열기

정보 창은 생성할 때 지도에 자동으로 표시되지 않습니다. 정보 창을 표시하려면 InfoWindow에서 open() 메서드를 호출하고, 정보 창을 열 Map과 선택적으로 정보 창을 고정할 Marker에 전달합니다. 마커가 제공되지 않는 경우 정보 창이 position 속성에서 열립니다.

// This example displays a marker at the center of Australia.
// When the user clicks the marker, an info window opens.

function initMap() {
  var uluru = {lat: -25.363, lng: 131.044};
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 4,
    center: uluru
  });

  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&#160;km (208&#160;mi) '+
      'south west of the nearest large town, Alice Springs; 450&#160;km '+
      '(280&#160;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="https://en.wikipedia.org/w/index.php?title=Uluru&oldid=297882194">'+
      'https://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: uluru,
    map: map,
    title: 'Uluru (Ayers Rock)'
  });
  marker.addListener('click', function() {
    infowindow.open(map, marker);
  });
}
<div id="map"></div>
/* Always set the map height explicitly to define the size of the div
 * element that contains the map. */
#map {
  height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}
 <!-- Replace the value of the key parameter with your own API key. -->
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap">
</script>
// This example displays a marker at the center of Australia.
// When the user clicks the marker, an info window opens.

function initMap() {
  var uluru = {lat: -25.363, lng: 131.044};
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 4,
    center: uluru
  });

  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&#160;km (208&#160;mi) '+
      'south west of the nearest large town, Alice Springs; 450&#160;km '+
      '(280&#160;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="https://en.wikipedia.org/w/index.php?title=Uluru&oldid=297882194">'+
      'https://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: uluru,
    map: map,
    title: 'Uluru (Ayers Rock)'
  });
  marker.addListener('click', function() {
    infowindow.open(map, marker);
  });
}

예시 보기(infowindow-simple.html).

다음 예시는 정보 창의 maxWidth를 설정합니다. 예시 보기(infowindow-simple-max.html).

정보 창 닫기

기본적으로, InfoWindow는 사용자가 닫기 컨트롤(정보 창 오른쪽 위에 있는 십자가)을 클릭할 때까지 열린 채로 있습니다. 원할 경우 close() 메서드를 명시적으로 호출하여 정보 창을 닫을 수 있습니다.

정보 창 이동

정보 창의 위치를 바꿀 수 있는 여러 가지 방법이 있습니다.

  • 정보 창에서 setPosition()을 호출합니다.
  • InfoWindow.open() 메서드를 사용하여 정보 창을 새 마커에 연결합니다. 참고: 마커를 전달하지 않고 open()을 호출하면, InfoWindowInfoWindowOptions 객체 리터럴을 통해 생성할 때 지정한 위치를 사용합니다.

다음에 대한 의견 보내기...

Google Maps JavaScript API
Google Maps JavaScript API
도움이 필요하시나요? 지원 페이지를 방문하세요.