웹 애플리케이션에서 사용자에게 더 많은 정보를 제공하고, 경험을 향상시키기 위해 맵(Mapping) 기능은 아주 중요합니다. 이 강좌에서는 리액트(React)와 구글 맵 API를 사용하여 커스텀 마커 및 정보창을 만들고, 해당 정보창에 장소 정보, 이미지 및 링크를 추가하는 방법에 대해 알아보겠습니다.
1. 환경 세팅하기
시작하기 전에 프로젝트 환경을 설정해야 합니다. Create React App을 사용하여 새로운 리액트 프로젝트를 생성합니다.
npx create-react-app custom-marker-example
cd custom-marker-example
npm install @react-google-maps/api2. 구글 맵 API 키 얻기
구글 맵을 사용하기 위해서는 API 키가 필요합니다. 구글 클라우드 플랫폼에서 새로운 프로젝트를 생성하고, ‘Maps JavaScript API’를 활성화한 후 API 키를 생성하세요.
3. 기본 맵 컴포넌트 만들기
이제 기본적인 맵 컴포넌트를 만들어보겠습니다. App.js 파일을 열고 다음 코드를 추가합니다.
import React from 'react';
import { GoogleMap, LoadScript } from '@react-google-maps/api';
const containerStyle = {
width: '800px',
height: '400px'
};
const center = {
lat: -3.745,
lng: -38.523
};
function MyMapComponent() {
return (
{/* 여기에 마커를 추가할 것입니다 */}
);
}
export default MyMapComponent;4. 커스텀 마커 추가하기
구글 맵에 커스텀 마커를 추가하려면, 다음과 같이 컴포넌트를 수정합니다. 마커의 위치와 이미지를 설정하여 사용자에게 명확한 정보를 제공합니다.
import React from 'react';
import { GoogleMap, LoadScript, Marker } from '@react-google-maps/api';
const containerStyle = {
width: '800px',
height: '400px'
};
const center = {
lat: -3.745,
lng: -38.523
};
const markerPosition = {
lat: -3.745,
lng: -38.523
};
function MyMapComponent() {
return (
{
alert('Marker clicked');
}}
/>
);
}
export default MyMapComponent;5. 정보창(InfoWindow) 추가하기
정보창은 사용자에게 추가 정보를 제공할 수 있는 유용한 도구입니다. 마커와 함께 정보창을 추가하여 장소에 대한 설명, 이미지 및 링크를 표시할 수 있습니다.
import React, { useState } from 'react';
import { GoogleMap, LoadScript, Marker, InfoWindow } from '@react-google-maps/api';
const containerStyle = {
width: '800px',
height: '400px'
};
const center = {
lat: -3.745,
lng: -38.523
};
const markerPosition = {
lat: -3.745,
lng: -38.523
};
function MyMapComponent() {
const [selected, setSelected] = useState(null);
return (
{
setSelected(markerPosition);
}}
/>
{selected ? (
{
setSelected(null);
}}
>
) : null}
);
}
export default MyMapComponent;
6. 다수의 마커 및 정보창 추가하기
이제 여러 마커와 정보창을 추가하는 방법을 살펴보겠습니다. 예를 들어, 장소 목록을 배열로 저장하고 맵에서 동적으로 렌더링할 수 있습니다.
import React, { useState } from 'react';
import { GoogleMap, LoadScript, Marker, InfoWindow } from '@react-google-maps/api';
const containerStyle = {
width: '800px',
height: '400px'
};
const center = {
lat: -3.745,
lng: -38.523
};
const locations = [
{
id: 1,
title: "장소 1",
position: { lat: -3.745, lng: -38.523 },
description: "장소 1 설명",
imageUrl: "http://example.com/image1.jpg",
link: "http://example.com/location1"
},
{
id: 2,
title: "장소 2",
position: { lat: -3.755, lng: -38.513 },
description: "장소 2 설명",
imageUrl: "http://example.com/image2.jpg",
link: "http://example.com/location2"
},
// 추가 장소를 여기에 더할 수 있습니다
];
function MyMapComponent() {
const [selected, setSelected] = useState(null);
return (
{locations.map(location => (
{
setSelected(location);
}}
/>
))}
{selected ? (
{
setSelected(null);
}}
>
) : null}
);
}
export default MyMapComponent;7. 스타일 및 최적화
사용자 경험을 위한 스타일은 매우 중요합니다. CSS를 사용하여 마커와 정보창의 디자인을 개선할 수 있습니다. 또한, 마커나 정보창을 동적으로 조절하여 성능을 최적화할 수 있습니다. 예를 들어, Lazy loading 또는 코드 스플리팅을 고려하여 사용자에게 더 나은 성능을 제공할 수 있습니다.
8. 결론
이번 강좌에서는 리액트에서 구글 맵을 활용하여 커스텀 마커 및 정보창을 만드는 방법에 대해 배웠습니다. 장소에 대한 정보, 이미지 및 링크를 포함하는 방법을 소개했으며, 다수의 마커를 관리하는 방법도 설명했습니다. 이 기술은 다양한 웹 애플리케이션에 적용할 수 있으며, 사용자에게 풍부한 경험을 제공하는 데 큰 도움이 될 것입니다. 더 나아가 주어진 데이터를 바탕으로 다양한 마커와 정보창을 자유롭게 구성하여 사용자의 필요에 맞춘 웹 애플리케이션을 제작해 보세요.