\uc774\ubc88 \ud3ec\uc2a4\ud2b8\uc5d0\uc11c\ub294 \ub9ac\uc561\ud2b8 \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc5d0\uc11c \uad6c\uae00 \ub9f5 API\ub97c \uc0ac\uc6a9\ud558\uc5ec \ucee4\uc2a4\ud140 \ub9c8\ucee4\uc640 \uc815\ubcf4\ucc3d\uc744 \ub9cc\ub4e4\uc5b4\ubcf4\uaca0\uc2b5\ub2c8\ub2e4. \uc0ac\uc6a9\uc790\uac00 \ub9c8\ucee4\ub97c \ud074\ub9ad\ud588\uc744 \ub54c \ud31d\uc5c5 \ud615\ud0dc\ub85c \uc815\ubcf4\ub97c \ud45c\uc2dc\ud558\ub294 \uae30\ub2a5\uc744 \uad6c\ud604\ud574\ubcfc \uac83\uc785\ub2c8\ub2e4. \uc774\ub97c \ud1b5\ud574 \uc9c0\ub3c4 \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc744 \ub354\uc6b1 \ud48d\ubd80\ud558\uac8c \ub9cc\ub4e4 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n
\uc6b0\uc120, \uad6c\uae00 \ub9f5\uc744 \uc0ac\uc6a9\ud560 \uc218 \uc788\ub3c4\ub85d \uc900\ube44\uac00 \ud544\uc694\ud569\ub2c8\ub2e4. \ub2e4\uc74c \ub2e8\uacc4\ub97c \ub530\ub77c \uad6c\uae00 API \ud0a4\ub97c \uc0dd\uc131\ud574 \uc8fc\uc138\uc694:<\/p>\n
\ub9ac\uc561\ud2b8 \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc744 \uc0dd\uc131\ud558\ub824\uba74, \uc544\ub798\uc758 \uba85\ub839\uc744 \ud130\ubbf8\ub110\uc5d0 \uc785\ub825\ud569\ub2c8\ub2e4.<\/p>\n
\nnpx create-react-app my-maps-app<\/code>\n<\/pre>\n\uc774\uc81c \uc560\ud50c\ub9ac\ucf00\uc774\uc158 \ud3f4\ub354\ub85c \uc774\ub3d9\ud569\ub2c8\ub2e4.<\/p>\n
\ncd my-maps-app<\/code>\n<\/pre>\n\uad6c\uae00 \ub9f5 API \uc124\uce58<\/h2>\n
\uad6c\uae00 \ub9f5 API\ub97c \uc0ac\uc6a9\ud558\uae30 \uc704\ud574 react-google-maps\/api<\/strong> \ud328\ud0a4\uc9c0\ub97c \uc124\uce58\ud569\ub2c8\ub2e4. \ud130\ubbf8\ub110\uc5d0 \uc544\ub798\uc758 \uba85\ub839\uc5b4\ub97c \uc785\ub825\ud558\uc138\uc694:<\/p>\n\nnpm install @react-google-maps\/api<\/code>\n<\/pre>\n\uae30\ubcf8 \ub9f5 \ucef4\ud3ec\ub10c\ud2b8 \ub9cc\ub4e4\uae30<\/h2>\n
src \ud3f4\ub354 \uc544\ub798\uc5d0 Map.js<\/code> \ud30c\uc77c\uc744 \uc0dd\uc131\ud558\uace0, \uae30\ubcf8\uc801\uc778 \ub9f5 \ucef4\ud3ec\ub10c\ud2b8\ub97c \uad6c\uc131\ud569\ub2c8\ub2e4.<\/p>\n\n\nimport React from 'react';\nimport { GoogleMap, LoadScript } from '@react-google-maps\/api';\n\nconst mapContainerStyle = {\n width: '100%',\n height: '400px'\n};\n\nconst center = {\n lat: 37.5665,\n lng: 126.978\n};\n\nconst Map = () => {\n return (\n \n \n {\/* \ub9c8\ucee4\uc640 \uc815\ubcf4\ucc3d\uc740 \uc5ec\uae30\uc11c \ucd94\uac00\ud560 \uac83\uc785\ub2c8\ub2e4 *\/}\n <\/googlemap>\n <\/loadscript>\n );\n};\n\nexport default Map;\n<\/code>\n<\/pre>\n\uc704 \ucf54\ub4dc\uc5d0\uc11c YOUR_API_KEY<\/code>\ub97c \uad6c\uae00 \ud074\ub77c\uc6b0\ub4dc \ud50c\ub7ab\ud3fc\uc5d0\uc11c \ubc1c\uae09\ubc1b\uc740 API \ud0a4\ub85c \uad50\uccb4\ud558\uc138\uc694.<\/p>\n\ucee4\uc2a4\ud140 \ub9c8\ucee4 \ucd94\uac00\ud558\uae30<\/h2>\n
\uc774\uc81c \ucee4\uc2a4\ud140 \ub9c8\ucee4\ub97c \ucd94\uac00\ud574\ubcf4\uaca0\uc2b5\ub2c8\ub2e4. \uc55e\uc11c \uc791\uc131\ud55c Map<\/code> \ucef4\ud3ec\ub10c\ud2b8\uc5d0 Marker<\/strong>\uc640 InfoWindow<\/strong>\ub97c \ucd94\uac00\ud569\ub2c8\ub2e4.<\/p>\n\n\nimport React, { useState } from 'react';\nimport { GoogleMap, LoadScript, Marker, InfoWindow } from '@react-google-maps\/api';\n\nconst mapContainerStyle = {\n width: '100%',\n height: '400px'\n};\n\nconst center = {\n lat: 37.5665,\n lng: 126.978\n};\n\nconst Map = () => {\n const [selected, setSelected] = useState(null);\n\n const markers = [\n {\n id: 1,\n name: '\uc11c\uc6b8\uc2dc\uccad',\n position: { lat: 37.5665, lng: 126.978 },\n info: '\uc11c\uc6b8\ud2b9\ubcc4\uc2dc \uc911\uad6c \uc138\uc885\ub300\ub85c 110'\n },\n {\n id: 2,\n name: '\ub0a8\uc0b0\ud0c0\uc6cc',\n position: { lat: 37.5512, lng: 126.9882 },\n info: '\uc11c\uc6b8\ud2b9\ubcc4\uc2dc \uc6a9\uc0b0\uad6c \ub0a8\uc0b0\uacf5\uc6d0\uae38 105'\n }\n ];\n\n return (\n \n \n {markers.map(marker => (\n setSelected(marker)}\n \/>\n ))}\n \n {selected && (\n setSelected(null)}\n >\n \n {selected.name}<\/h2>\n
{selected.info}<\/p>\n <\/div>\n <\/infowindow>\n )}\n <\/marker><\/googlemap>\n <\/loadscript>\n );\n};\n\nexport default Map;\n<\/code>\n<\/pre>\n
\ucef4\ud3ec\ub10c\ud2b8 \ud1b5\ud569\ud558\uae30<\/h2>\n
\uc774\uc81c Map<\/code> \ucef4\ud3ec\ub10c\ud2b8\ub97c App.js<\/code>\uc5d0\uc11c \uc0ac\uc6a9\ud574\ubcf4\uaca0\uc2b5\ub2c8\ub2e4. src\/App.js<\/code> \ud30c\uc77c\uc744 \uc5f4\uace0 \uc544\ub798\uc640 \uac19\uc774 \uc218\uc815\ud558\uc138\uc694:<\/p>\n\n\nimport React from 'react';\nimport '.\/App.css';\nimport Map from '.\/Map';\n\nconst App = () => {\n return (\n \n \ub9ac\uc561\ud2b8 \ucee4\uc2a4\ud140 \ub9c8\ucee4 \ub9cc\ub4e4\uae30 \uc608\uc81c<\/h1>\n