React용 Google Maps API 내부의 동적 포스트잇

다음 개인 프로젝트를 위해 무엇을 만들지 확신이 없었지만 강력하고 기능이 풍부한 API를 통합하고 싶었다. 저는 구글맵으로 갔습니다.

널리 사용되기 때문에 Google과 해당 서비스를 구현한 많은 주니어 및 시니어 프로그래머가 제공하는 풍부한 설명서와 자습서가 있습니다.

이전 프로젝트에서 YouTube Data API로 작업했기 때문에 이미 개발자 콘솔을 설정했고 API 키를 얻기 위한 등록 및 프로세스에 익숙했습니다. 그런데 이러한 단계는 매우 간단합니다.

몇 개의 블로그에서 아주 적은 양의 코딩과 몇 가지 유용한 팁을 사용하여 새로운 React 프로젝트에 지도를 추가하고 몇 가지 기능을 실험하기 시작했습니다. 단계별 설정 프로세스를 문서화하는 수많은 게시물에 추가하지는 않겠습니다. 대신 특정 기능을 확장한 방법에 대해 설명하겠습니다.

이 사이트 는 Maps 구성 요소의 설정 및 구현이 진행되는 한 React 프로젝트를 위한 훌륭한 리소스입니다. @react-google-maps/api를 설치했으면 기본 지도를 추가하기 위해 각각 지도를 로드하고 표시하기 위한 LoadScript 및 GoogleMap 구성요소만 추가하면 됩니다.

이것만큼 쉽습니다. 기본 모양을 조정하기 위해 여기에 추가된 사소한 사양만 있음을 알 수 있습니다.

많은 지도 기반 앱이 사용하는 공통 기능은 일반적으로 검색 또는 사용자 입력의 결과인 관심 지점을 지정하는 독특한 빨간색 마커입니다. 대부분의 기능과 마찬가지로 마커는 Google 지도 생태계의 일부만을 나타내는 많은 내장 소품이 있는 구성요소입니다.

종종 마커 옆에는 사용자가 마커를 클릭하거나 스크롤할 때 텍스트 정보를 표시하는 InfoWindows로 알려진 팝아웃 태그가 있습니다. 이러한 InfoWindows를 보다 동적으로 만들어 사용자 입력 및 삭제가 가능하도록 하는 것이 흥미로울 것이라고 생각했습니다.

다음은 내 BaseMapContainer의 지도 부분입니다.

여기에서 모든 내용을 다루지는 않겠지만 위의 코드는 내 지도의 기본 모양을 지정하고(뉴욕시의 Columbus Circle 좌표를 중심으로 사용함) 사용자가 마커를 놓은 다음 행동할 수 있는 기능을 만듭니다. 그들에.

사용자가 지정된 Marker를 선택하면 정보 창에는 입력 양식, 메모 목록 및 메모 삭제 및 편집을 위한 메모 구성 요소로 구성된 내 NotesContainer 구성 요소가 포함됩니다. 또한 마커의 위치를 ​​소품으로 전달하므로 모든 필수 정보가 한 곳에 저장됩니다.

세련되지 않은 스타일을 용서하십시오. 그러나 여기에 간편한 포스트잇 기능이 작동합니다.

API 게임에 발을 담그거나 기능이 풍부한 시스템에서 실험하려는 사람에게 Google Maps API는 전환하기에 좋은 곳입니다.