[react] 지도에서 숙박시설 정보 표시하기

22 Dec 2023

react

React 애플리케이션에서 지도를 통해 숙박시설 정보를 표시하는 기능을 구현하는 과정에 대해 알아봅시다.

목표

Google Maps API를 사용하여 지도를 표시합니다.
지도에 마커를 추가하여 숙박시설의 위치를 표시합니다.
사용자가 마커를 클릭하면 해당 숙박시설의 정보를 표시합니다.

Google Maps API 통합

React에서 Google Maps를 사용하기 위해서는 Google Maps JavaScript API를 활용하여 Google Cloud Platform에서 API 키를 발급받아야 합니다.

<script async defer src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap"></script>

지도 표시하기

Google Maps API를 활용하여 React 컴포넌트 내에서 지도를 표시하는 방법입니다.

import React, { useEffect } from 'react';

const Map = () => {
  useEffect(() => {
    const map = new window.google.maps.Map(document.getElementById('map'), {
      center: { lat: 37.7749, lng: -122.4194 },
      zoom: 12
    });
  }, []);

  return <div id="map" style={{ width: '100%', height: '400px' }}></div>;
};

export default Map;

마커 추가하기

숙박시설의 위치를 나타내기 위해 지도에 마커를 추가합니다.

useEffect(() => {
  const map = new window.google.maps.Map(document.getElementById('map'), {
    center: { lat: 37.7749, lng: -122.4194 },
    zoom: 12
  });

  const marker = new window.google.maps.Marker({
    position: { lat: 37.7749, lng: -122.4194 },
    map: map,
    title: '숙박시설'
  });
}, []);

정보 표시하기

마커를 클릭하면 해당 숙박시설의 정보를 표시하는 기능을 구현합니다.

useEffect(() => {
  const map = new window.google.maps.Map(document.getElementById('map'), {
    center: { lat: 37.7749, lng: -122.4194 },
    zoom: 12
  });

  const infowindow = new window.google.maps.InfoWindow({
    content: '숙박시설의 정보를 표시합니다.'
  });

  const marker = new window.google.maps.Marker({
    position: { lat: 37.7749, lng: -122.4194 },
    map: map,
    title: '숙박시설'
  });

  marker.addListener('click', () => {
    infowindow.open(map, marker);
  });
}, []);

결론

React에서 Google Maps API를 활용하여 지도를 표시하고, 숙박시설 정보를 마커로 표시하는 기능을 구현하는 방법에 대해 알아보았습니다. 이를 통해 사용자들은 쉽게 숙박시설을 찾고 원하는 정보를 확인할 수 있습니다.