Google Maps에서 마커 클릭 시 오버레이 중앙 정렬하기

Google Maps에서 마커 클릭 시 오버레이 중앙 정렬하기

문제 상황

Google Maps에서 마커를 클릭했을 때, 해당 마커 위에 오버레이가 표시되는데, 오버레이가 지도 중앙에 위치하지 않는 문제가 있었습니다. 특히 PC와 모바일 환경에서 각각 다른 위치에 표시되어 사용자 경험을 해치는 상황이었습니다.

해결 방법

이 문제를 해결하기 위해 두 가지 접근 방식을 시도했습니다:

1. 위도/경도 기반 조정 (초기 시도)

const handleMarkerClick = (hotel: HotelCardItemProps) => {
  if (markerVariant === 'price' && map) {
    const offset = props.device === 'pc' ? -0.004 : 0.1;
    map.panTo({
      lat: hotel.latitude - offset,
      lng: hotel.longitude
    });
    if (map.getZoom()! < 14) {
      map.setZoom(14);
    }
  }
  onMarkerClick?.(hotel);
  setSelectedHtlMasterId(hotel.id);
};

이 방식의 단점:

• 위도 1도가 약 111km에 해당하여 미세 조정이 어려움

• 직관적이지 않은 값 조정

• 디바이스별로 다른 값을 적용하기 어려움

2. 픽셀 기반 조정 (최종 해결)

const handleMarkerClick = (hotel: HotelCardItemProps) => {
  if (markerVariant === 'price' && map) {
    // 1. 먼저 마커 위치로 이동
    map.panTo({ lat: hotel.latitude, lng: hotel.longitude });
 
    // 2. 오버레이 높이의 절반만큼 위로 이동 (PC 환경)
    const yOffset = props.device === 'pc' ? -200 : 0;
    map.panBy(0, yOffset);
 
    if (map.getZoom()! < 14) {
      map.setZoom(14);
    }
  }
  onMarkerClick?.(hotel);
  setSelectedHtlMasterId(hotel.id);
};

이 방식의 장점:

• 픽셀 단위로 직관적인 조정 가능

• 오버레이의 실제 크기를 기준으로 조정 가능

• 디바이스별로 다른 값을 쉽게 적용 가능

구현 시 고려사항

디바이스별 대응

• PC: 오버레이가 마커 위에 표시되므로, 오버레이 높이의 절반만큼 위로 이동

• 모바일: 기존 위치 유지 (0픽셀 이동)

Google Maps API 활용

• panTo(): 특정 위도/경도로 지도 이동

• panBy(): 현재 뷰포트 기준 픽셀 단위 이동

성능 최적화

• useCallback을 사용하여 함수 재생성 방지

• 불필요한 지도 이동 최소화

결론

위도/경도 기반의 조정보다 픽셀 기반의 조정이 더 직관적이고 유지보수하기 쉬운 해결책이었습니다. 특히 오버레이의 실제 크기를 기준으로 조정할 수 있어, 디자인 변경 시에도 쉽게 대응할 수 있습니다.

참고사항

• 픽셀 값(-200)은 오버레이의 실제 크기에 따라 조정이 필요할 수 있습니다.

• 모바일 환경에서는 추가적인 조정이 필요할 수 있으며, 이는 실제 디바이스에서 테스트하여 결정하는 것이 좋습니다.