75 1 add google maps api with library #76
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Pyotato
commented
Aug 28, 2024
Comment on lines
+9
to
+17
| const locations = [ | ||
| { lat: 35.62366, lng: 139.753634 }, | ||
| { lat: 35.6612723, lng: 139.7775608 }, | ||
| { lat: 35.6539099, lng: 139.7975056 }, | ||
| { lat: 35.662761, lng: 139.7991693 }, | ||
| { lat: 35.6660912, lng: 139.7876416 }, | ||
| ]; | ||
|
|
||
| export default function Maps() { |
There was a problem hiding this comment.
!! TODO
프롭스로 좌표받아오기
Comment on lines
+83
to
+102
| // !! 당장은 최소거리 선택할 필요 없음 | ||
| // !!return ( | ||
| // !! <div className={cx('directions', 'visible')}> | ||
| // !! {/* <div className={cx('directions', selectedDirection === JSON.stringify(location) ? 'visible' : null)}> */} | ||
| // !! <h2>{selected.summary}</h2> | ||
| // !! <p>{leg.start_address}</p> | ||
| // !! <p>distance: {leg.distance?.text}</p> | ||
| // !! <p>duration: {leg.duration?.text}</p> | ||
|
|
||
| // !! <h2>other routes</h2> | ||
| // !! <ul> | ||
| // !! {routes.map((route, index) => ( | ||
| // !! <li key={route.summary}> | ||
| // !! <button onClick={() => setRouteIndex(index)}>{route.summary}</button> | ||
| // !! </li> | ||
| // !! ))} | ||
| // !! </ul> | ||
| // !! </div> | ||
| // !!); | ||
| }; |
There was a problem hiding this comment.
경로 선택할 수 있도록 하는 기능 꼭 필요하지 않을 수도?
Comment on lines
+9
to
+20
| const Pin = ({ numberOfOrder = 1, variation = 'accommodation', ...props }: PinProps) => { | ||
| return ( | ||
| <ReactGoogleMapsPin | ||
| {...props} | ||
| background={PIN_VARIATION[variation]['background']} | ||
| borderColor={PIN_VARIATION[variation]['borderColor']} | ||
| glyphColor={PIN_VARIATION[variation]['glyphColor']} | ||
| > | ||
| {numberOfOrder} | ||
| </ReactGoogleMapsPin> | ||
| ); | ||
| }; |
Comment on lines
+29
to
+45
| const PIN_VARIATION = { | ||
| accommodation: { | ||
| background: '#0f6e9d', | ||
| borderColor: '#003f64', | ||
| glyphColor: '#6096d9', | ||
| }, | ||
| restaurant: { | ||
| background: '#9d220f', | ||
| borderColor: '#642100', | ||
| glyphColor: '#d98860', | ||
| }, | ||
| attraction: { | ||
| background: '#4e0074', | ||
| borderColor: '#2f0064', | ||
| glyphColor: '#9660d9', | ||
| }, | ||
| }; |
There was a problem hiding this comment.
Marker의 pin 종류에 따른 스타일
appear
reviewed
Aug 28, 2024
| colorScheme: 'FOLLOW_SYSTEM', | ||
| }; | ||
|
|
||
| const API_KEY = process.env.NEXT_PUBLIC_GOOGLE_MAP_API as string; |
There was a problem hiding this comment.
엇..지금 pnpm run dev로 로컬로 돌리고 있는데..😅 혹시 제가 이해를 잘못한 걸까요..?
Closed
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
PULL REQUEST TEMPLATE
PR 설명
@appear 구글맵 연동 중!
현재는 좌표를 하드코딩으로 넣어줬지만 데이터 저장한 것에서 가져와서 뿌려줄 거 같습니당.
스크린샷 & URL