(4) 구글 지도 API - 정보창 표시하기

다음은 정보창(infowindow) 표시하기 입니다. 이 기능은 위치기반 서비스에서 특정장소의 부가설명을 위해 사용됩니다. 예제를 확인하기 위한 접근 메뉴는 [Samples] – [Drawing on the Map] – [Infowindows] 입니다.

해당 예제에서는 호주의 에어즈락에 대한 설명을 정보창으로 구현해 놨지만 저는 각 스크립트의 구문이 어떠한 역할을 하는지에 대한 비교를 위해서 별도로 서울역에 대한 정보창 스크립트 구문을 작성했습니다.

코딩 결과와 스크립트 전문은 아래와 같습니다.

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
  <head>
    <title>Info Windows</title>
    <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
    <script
      src="https://maps.googleapis.com/maps/api/js?YOUR_API_KEY&callback=initMap&libraries=&v=weekly"
      defer
    ></script>
    <style type="text/css">
    
    
      #bound {
      	height: 60%;
      	width: 60%;
      }
      
      /* 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;
      }
    </style>
    <script>
      "use strict";

      // This example displays a marker at the center of Australia.
      // When the user clicks the marker, an info window opens.
      function initMap() {
        const uluru = {
          lat: 37.5546788,
          lng: 126.9706069
        };
        const map = new google.maps.Map(document.getElementById("map"), {
          zoom: 15,
          center: uluru
        });
        const contentString =
          '<div id="content">' +
          '<div id="siteNotice">' +
          "</div>" +
          '<h1 id="firstHeading" class="firstHeading"> 서울역 </h1>' +
          '<div id="bodyContent"><p>' +
          "서울특별시 중구와 용산구의 경계에 있는" +
          "서울특별시의 중앙역이자 대한민국 철도의 중추역이다. " +
          "간선철도 경부선, 경의선과 인천국제공항철도의 기점이자" +
          "수도권 전철 1호선 경부선 구간과 수도권 전철 경의·중앙선의 기점이며" +
          "수도권 전철 4호선이 지나간다." +
          "경부선이 철도의 대동맥이라면  이 곳은 대한민국 철도의 기점 및 종점이다 </p>" +
          "</div>" +
          "</div>";
        const infowindow = new google.maps.InfoWindow({
          content: contentString
        });
        const marker = new google.maps.Marker({
          position: uluru,
          map,
          title: "서울역(Seoul Station)"
        });
        marker.addListener("click", () => {
          infowindow.open(map, marker);
        });
      }
    </script>
  </head>
  <body>
  <div id = "bound">
    <div id="map"></div>
  </div>
  </body>
</html>

이제는 스크립트가 눈에 좀 익숙해진 것 같습니다. 서울역의 좌표(uluru)를 중심으로 맵을 초기화(zoom level : 15)하고 content에 서울역에 대한 설명을 작성해 넣었습니다.

태그와 태그 그리고 태그등이 보이는 것을 보니 html을 구현하여 infowindow의 content 변수에 저장했군요. 그리고 marker의 위치를 uluru 변수로 지정하고 클릭했을 때 infowindow.open 이벤트를 실행하여 저장된 내용을 보여주는 스크립트 구문입니다.

마찬가지로 본문에서는 스크립트 내부에 직접 콘텐츠를 작성했지만 실제 서비스에서는 MySQL, MariaDB 등의 서버에 업로드된 정보를 불러와서 각 변수를 대신하는 것으로 많은 데이터들을 관리할 수 있습니다. 마치 게시판의 글을 등록할 때 DB에 html 형태로 저장하고 이를 불러오는 것과 동일합니다.

번외로 아래는 실제 에어비엔비에서 서울역 근처의 숙소를 검색하고 특정 마커를 클릭했을때 나타나는 숙소에 대한 정보창입니다.

에어비엔비의 숙소정보화면, 이 기능도 구글 지도 API의 Custom infowindow로 만들어진 것이다

화려하고 세련되어 보이는 이 기능도 사실 infowindow를 통해 구현 가능합니다. 텍스트 구현 방법은 예제와 동일하고 내부의 슈퍼호스트 div나 하트모양, 대표 이미지들은 전부 html과 css 태그를 이용해 구현된 것들입니다.

물론 수많은 숙소의 데이터들은 에어비엔비 본사의 DB에 잘 저장되어 있겠죠?

예제에서는 구글에서 제공하는 infowindow CSS를 활용하였지만 깃허브(Github)나 공개포럼에서는 CSS를 커스터마이징하여 에어비엔비나 다른 사이트와 같은 독창적인 디자인을 구현할 수 있습니다. 향후 기회가 된다면 infowindow의 커스터마이징 내용도 다른 포스팅에서 다뤄보록 하겠습니다.

2022.12.14 - [정보기술] - (5) 구글 지도 API - 자동완성주소 검색하기

(5) 구글 지도 API - 자동완성주소 검색하기

2022.12.14 - [정보기술] - (1) 구글 지도 API – 지도 만들기 2022.12.14 - [정보기술] - (2) 구글 지도 API - 단일 마커 표시하기 2022.12.14 - [정보기술] - (3) 구글 지도 API - 다중 마커 표시하기 2022.12.14 - [정보

iftraveler.tistory.com

'정보기술' 카테고리의 다른 글

(6) 번외 - 자동완성주소 검색에 관하여 (0)	2022.12.14
(5) 구글 지도 API - 자동완성주소 검색하기 (0)	2022.12.14
(3) 구글 지도 API - 다중 마커 표시하기 (1)	2022.12.14
(2) 구글 지도 API - 단일 마커 표시하기 (0)	2022.12.14
(1) 구글 지도 API – 지도 만들기 (0)	2022.12.14

당신과 나의 어바웃 라이프

(4) 구글 지도 API - 정보창 표시하기

'정보기술' 카테고리의 다른 글

댓글

티스토리툴바

(4) 구글 지도 API - 정보창 표시하기

'정보기술' 카테고리의 다른 글

관련글

댓글

티스토리툴바