react-google-maps/api 사용해보신 분 질문드립니다 ..
본문
react 에서 react-google-maps/api 를 사용하고 있는데
패키지가 아닌 google developer (https://developers.google.com/maps/documentation/javascript/advanced-markers/html-markers?hl=ko) 에서는 icon 을 html 로 작성할 수 있는데..
혹시 react-google-maps/api 패키지에서는 icon 을 html 로 커스텀 할 수 있나요?
저는 https://react-google-maps-api-docs.netlify.app/#marker 여기서 참고하고 있는데 찾기가 어렵네요..
혹시 아시는 분 있으면 도와주십쇼!!
제가 작성한 소스는
<GoogleMap
mapContainerStyle={containerStyle}
center={center}
zoom={10}
onLoad={onLoad}
onUnmount={onUnmount}
>
<Marker
onLoad={onLoad2}
position={position}
label={"test"}
ex)<div style={{width : 50,height : 50 , background : "red"}}></div>이런식으로 작성하고 싶습니다..
/>
{ /* Child components, such as markers, info windows, etc. */ }
<></>
</GoogleMap>
감사합니다.
답변 3
다음과 같이 해보시는 건 어떨까 합니다.
import { GoogleMap, Marker } from "@react-google-maps/api";
const containerStyle = {
width: "100%",
height: "400px",
};
const center = {
lat: -34.397,
lng: 150.644,
};
const position = {
lat: -34.397,
lng: 150.644,
};
const markerIcon = (
<div style={{ width: 50, height: 50, background: "red" }}></div>
);
function MyMapComponent() {
const onLoad = (map) => {
// Do something on map load
};
const onUnmount = (map) => {
// Do something when the map is unmounted
};
const onLoad2 = (marker) => {
// Do something when the marker is loaded
};
return (
<GoogleMap
mapContainerStyle={containerStyle}
center={center}
zoom={10}
onLoad={onLoad}
onUnmount={onUnmount}
>
<Marker
onLoad={onLoad2}
position={position}
label={"test"}
icon={markerIcon}
/>
{/* Child components, such as markers, info windows, etc. */}
<></>
</GoogleMap>
);
}
export default MyMapComponent;
icon 속성을 사용하여 직접 아이콘을 설정해야 하며,
HTML 요소를 사용하여 아이콘을 커스텀하려면 icon 속성에 ReactNode를 전달해야 함.
markerIcon 변수는 원하는 형태의 아이콘을 표시하기 위해 <div> 요소로 구성되어 있고, 이렇게 설정된 아이콘이 마커에 표시되게 할 수 있을 것 같습니다.
markerIcon 변수를 원하는 형태의 HTML 요소로 변경하여 커스텀 아이콘을 만들 수 있지 않을까 합니다.
댓글 감사합니다.
알려주신대로 해봤는데.. 적용이 되진 않네요 ㅠ.ㅠ
다음과 같이 해보시겠어요~
import { GoogleMap, Marker } from "@react-google-maps/api";
const containerStyle = {
width: "100%",
height: "400px",
};
const center = {
lat: -34.397,
lng: 150.644,
};
const position = {
lat: -34.397,
lng: 150.644,
};
function MyMapComponent() {
const onLoad = (map) => {
// Do something on map load
};
const onUnmount = (map) => {
// Do something when the map is unmounted
};
const onLoad2 = (marker) => {
// Do something when the marker is loaded
};
const markerOptions = {
icon: {
url: "https://example.com/my-custom-icon.png", // 커스텀 아이콘의 URL을 설정합니다.
scaledSize: new window.google.maps.Size(50, 50), // 아이콘의 크기를 설정합니다.
},
};
return (
<GoogleMap
mapContainerStyle={containerStyle}
center={center}
zoom={10}
onLoad={onLoad}
onUnmount={onUnmount}
>
<Marker
onLoad={onLoad2}
position={position}
label={"test"}
options={markerOptions} // 마커의 옵션을 설정합니다.
/>
{/* Child components, such as markers, info windows, etc. */}
<></>
</GoogleMap>
);
}
export default MyMapComponent;
lat, lng 값은 실제 좌표값으로 수정하셔야 합니다.
https://example.com/my-custom-icon.png // 실제 아이콘이 있는 경로로 설정
url: "https://example.com/my-custom-icon.png" 이 부분에 결국 파일이 있어야 한다는 말씀이신거죠? html 요소가 아닌거죠?
react-google-maps/api 패키지에서는 icon을 커스텀하기 위해 HTML을 사용할 수 있습니다. 이 패키지에서 제공하는 Marker 컴포넌트를 사용하면 마커에 커스텀 아이콘을 적용할 수 있습니다.
아래는 예시 코드입니다:
```jsx
import { GoogleMap, Marker } from 'react-google-maps';
const Map = () => {
const customIcon = {
url: 'https://example.com/custom-icon.png',
size: new window.google.maps.Size(30, 30),
origin: new window.google.maps.Point(0, 0),
anchor: new window.google.maps.Point(15, 15),
scaledSize: new window.google.maps.Size(30, 30)
};
return (
<GoogleMap>
<Marker position={{ lat: 37.123, lng: -122.456 }} icon={customIcon} />
</GoogleMap>
);
};
```
위의 예시에서, `customIcon` 객체는 아이콘의 URL, 크기, 기준점(anchor), 스케일된 크기 등을 정의합니다. `Marker` 컴포넌트의 `icon` 속성에 이 커스텀 아이콘을 전달하여 지도상의 마커에 적용할 수 있습니다.
자세한 내용은 react-google-maps/api 패키지의 공식 문서를 참고하시기 바랍니다.
네, url: "https://example.com/my-custom-icon.png" 부분에서는 실제로 커스텀 아이콘 파일의 URL을 사용해야 합니다.
react-google-maps/api 패키지에서는 HTML 요소로 직접 커스텀 아이콘을 사용하는 기능은 제공하지 않는 걸로 알고 있습니다.
만약 HTML 요소로 마커 아이콘을 커스텀하고 싶으시다면, Google Maps JavaScript API를 활용하여 HTML 요소를 사용한 커스텀 마커를 구현할 수는 있습니다.
import React, { useEffect } from "react";
const containerStyle = {
width: "100%",
height: "400px",
};
const center = {
lat: -34.397,
lng: 150.644,
};
const position = {
lat: -34.397,
lng: 150.644,
};
function MyMapComponent() {
useEffect(() => {
const map = new window.google.maps.Map(document.getElementById("map"), {
center: center,
zoom: 10,
});
const marker = new window.google.maps.Marker({
position: position,
map: map,
label: "test",
icon: {
url: "data:image/svg+xml;charset=UTF-8,<svg xmlns='http://www.w3.org/2000/svg' width='50' height='50' viewBox='0 0 50 50'><circle cx='25' cy='25' r='20' fill='red'/></svg>",
scaledSize: new window.google.maps.Size(50, 50),
},
});
}, []);
return <div id="map" style={containerStyle}></div>;
}
export default MyMapComponent;
icon 속성에는 SVG 이미지의 데이터 URI를 사용하여 커스텀 아이콘을 설정합니다.
<div id="map" style={containerStyle}></div>로 지도를 렌더링할 컨테이너를 설정하고, useEffect 훅을 사용하여 컴포넌트가 마운트되면 Google Maps JavaScript API를 사용하여 지도와 커스텀 마커를 생성하게 됩니다.
이렇게 하면 HTML 요소를 사용하여 직접 마커의 커스텀 아이콘을 만들 수 있습니다
친절하게 설명주셔서 감사합니다!!
