{"id":38990,"date":"2024-11-02T02:36:10","date_gmt":"2024-11-02T02:36:10","guid":{"rendered":"http:\/\/atmokpo.com\/w\/?p=38990"},"modified":"2024-11-26T06:42:43","modified_gmt":"2024-11-26T06:42:43","slug":"%ec%a7%80%eb%8f%84%ec%97%90%ec%84%9c-%ec%9c%84%ec%b9%98-%ea%b2%80%ec%83%89-%eb%b0%8f-%ec%a3%bc%ec%86%8c-%ed%91%9c%ec%8b%9c-%ea%b8%b0%eb%8a%a5-%ea%b5%ac%ed%98%84-geocoding-api%eb%a5%bc-%ec%9d%b4","status":"publish","type":"post","link":"https:\/\/atmokpo.com\/w\/38990\/","title":{"rendered":"\uc9c0\ub3c4\uc5d0\uc11c \uc704\uce58 \uac80\uc0c9 \ubc0f \uc8fc\uc18c \ud45c\uc2dc \uae30\ub2a5 \uad6c\ud604, Geocoding API\ub97c \uc774\uc6a9\ud55c \uc8fc\uc18c \ubcc0\ud658 \ubc0f \uc704\uce58 \ub9c8\ucee4 \ud45c\uc2dc"},"content":{"rendered":"

<\/p>\n

\ucd5c\uadfc \uba87 \ub144\uac04 \uc6f9 \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc5d0\uc11c \uc9c0\ub3c4 \uae30\ub2a5\uc740 \ud544\uc218\uc801\uc778 \uc694\uc18c\uac00 \ub418\uc5c8\uc2b5\ub2c8\ub2e4. \uc0ac\uc6a9\uc790\uc5d0\uac8c \uc704\uce58 \uae30\ubc18 \uc11c\ube44\uc2a4\ub97c \uc81c\uacf5\ud558\uae30 \uc704\ud574, \uc9c0\ub3c4\uc5d0\uc11c \ud2b9\uc815 \uc8fc\uc18c\ub97c \uac80\uc0c9\ud558\uace0 \ud574\ub2f9 \uc704\uce58\uc5d0 \ub9c8\ucee4\ub97c \ud45c\uc2dc\ud558\ub294 \uae30\ub2a5\uc744 \uad6c\ud604\ud558\ub294 \uac83\uc740 \ub9e4\uc6b0 \uc720\uc6a9\ud569\ub2c8\ub2e4. \uc774\ubc88 \ud3ec\uc2a4\ud2b8\uc5d0\uc11c\ub294 Geocoding API<\/strong>\ub97c \uc774\uc6a9\ud55c \uc8fc\uc18c \ubcc0\ud658 \ubc0f \uc704\uce58 \ub9c8\ucee4 \ud45c\uc2dc \uae30\ub2a5\uc744 \ub9ac\uc561\ud2b8 \uc571\uc5d0\uc11c \uad6c\ud604\ud558\ub294 \ubc29\ubc95\uc5d0 \ub300\ud574 \uc790\uc138\ud788 \uc54c\uc544\ubcf4\uaca0\uc2b5\ub2c8\ub2e4.<\/p>\n

1. \ud504\ub85c\uc81d\ud2b8 \uc124\uc815<\/h2>\n

\uba3c\uc800 \uc0c8\ub85c\uc6b4 \ub9ac\uc561\ud2b8 \ud504\ub85c\uc81d\ud2b8\ub97c \uc0dd\uc131\ud558\uaca0\uc2b5\ub2c8\ub2e4. \ud130\ubbf8\ub110\uc744 \uc5f4\uace0 \ub2e4\uc74c \uba85\ub839\uc5b4\ub97c \uc2e4\ud589\ud558\uc5ec \ud504\ub85c\uc81d\ud2b8\ub97c \uc0dd\uc131\ud569\ub2c8\ub2e4:<\/p>\n

npx create-react-app location-search-app<\/code><\/pre>\n
\ud504\ub85c\uc81d\ud2b8\uac00 \uc0dd\uc131\ub418\uba74 \ud574\ub2f9 \ub514\ub809\ud1a0\ub9ac\ub85c \uc774\ub3d9\ud569\ub2c8\ub2e4:<\/p>\n
cd location-search-app<\/code><\/pre>\n
2. \ud544\uc694\ud55c \ub77c\uc774\ube0c\ub7ec\ub9ac \uc124\uce58<\/h2>\n
\uad6c\uae00 \ub9f5\uc2a4 API\ub97c \uc0ac\uc6a9\ud558\uae30 \uc704\ud574 react-google-maps\/api<\/strong> \ub77c\uc774\ube0c\ub7ec\ub9ac\ub97c \uc124\uce58\ud569\ub2c8\ub2e4. \ub2e4\uc74c \uba85\ub839\uc5b4\ub97c \ud1b5\ud574 \uc124\uce58\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4:<\/p>\n
npm install @react-google-maps\/api<\/code><\/pre>\n
\ub610\ud55c, axios<\/strong> \ub77c\uc774\ube0c\ub7ec\ub9ac\ub97c \uc0ac\uc6a9\ud558\uc5ec Geocoding API\uc640 \ud1b5\uc2e0\ud558\uae30 \uc704\ud574 \uc124\uce58\ud569\ub2c8\ub2e4:<\/p>\n
npm install axios<\/code><\/pre>\n
3. Geocoding API \uc0ac\uc6a9\ud558\uae30<\/h2>\n
Geocoding API\ub294 \uc8fc\uc18c\ub97c \uc88c\ud45c\ub85c \ubcc0\ud658\ud574\uc8fc\ub294 \uc11c\ube44\uc2a4\uc785\ub2c8\ub2e4. \uad6c\uae00 \ud074\ub77c\uc6b0\ub4dc \ud50c\ub7ab\ud3fc\uc5d0\uc11c Geocoding API\ub97c \ud65c\uc131\ud654\ud55c \ud6c4 API \ud0a4\ub97c \ubc1c\uae09\ubc1b\uc544\uc57c \ud569\ub2c8\ub2e4. API \ud0a4\ub97c \ubc1c\uae09\ubc1b\uc558\ub2e4\uba74 \uc544\ub798\uc640 \uac19\uc740 \ud615\uc2dd\uc73c\ub85c \uc8fc\uc18c\ub97c \uc804\ub2ec\ud558\uc5ec \uc0ac\uc6a9\ud569\ub2c8\ub2e4.<\/p>\n
Geocoding API \ud638\ucd9c \uc608\uc81c<\/h3>\n
\nconst axios = require('axios');\n\nconst getCoordinates = async (address) => {\n    const apiKey = 'YOUR_API_KEY'; \/\/ \ubc1c\uae09\ubc1b\uc740 API \ud0a4\n    const url = `https:\/\/maps.googleapis.com\/maps\/api\/geocode\/json?address=${encodeURIComponent(address)}&key=${apiKey}`;\n    \n    try {\n        const response = await axios.get(url);\n        return response.data.results[0].geometry.location; \/\/ \uc704\ub3c4\uc640 \uacbd\ub3c4 \ubc18\ud658\n    } catch (error) {\n        console.error('Error fetching data from Geocoding API', error);\n    }\n};\n\n\/\/ \uc0ac\uc6a9 \uc608\uc81c\ngetCoordinates('\uc11c\uc6b8\ud2b9\ubcc4\uc2dc \uc885\ub85c\uad6c').then(location => {\n    console.log(location); \/\/ { lat: 37.573021, lng: 126.979430 }\n});\n    <\/code><\/pre>\n
4. \uc9c0\ub3c4 \ucef4\ud3ec\ub10c\ud2b8 \uad6c\ud604\ud558\uae30<\/h2>\n
\uc774\uc81c \ub9ac\uc561\ud2b8 \ucef4\ud3ec\ub10c\ud2b8\ub97c \uc0dd\uc131\ud558\uc5ec \uc0ac\uc6a9\ud560 \uc9c0\ub3c4\uc640 \uc785\ub825 \ud544\ub4dc\ub97c \uad6c\ud604\ud558\uaca0\uc2b5\ub2c8\ub2e4. src\/Map.js<\/strong> \ud30c\uc77c\uc744 \uc0dd\uc131\ud558\uace0 \uc544\ub798\uc640 \uac19\uc774 \uc791\uc131\ud569\ub2c8\ub2e4:<\/p>\n
\nimport React, { useState, useEffect } from 'react';\nimport { GoogleMap, LoadScript, Marker } from '@react-google-maps\/api';\nimport axios from 'axios';\n\nconst Map = () => {\n    const [location, setLocation] = useState({ lat: 37.573021, lng: 126.979430 });\n    const [address, setAddress] = useState('');\n    const apiKey = 'YOUR_API_KEY'; \/\/ \ubc1c\uae09\ubc1b\uc740 API \ud0a4\n\n    const mapContainerStyle = {\n        width: '100%',\n        height: '400px'\n    };\n\n    const center = {\n        lat: location.lat,\n        lng: location.lng\n    };\n\n    const handleAddressChange = (e) => {\n        setAddress(e.target.value);\n    };\n\n    const handleSearch = async () => {\n        const coordinates = await getCoordinates(address);\n        setLocation(coordinates);\n    };\n\n    const getCoordinates = async (address) => {\n        const url = `https:\/\/maps.googleapis.com\/maps\/api\/geocode\/json?address=${encodeURIComponent(address)}&key=${apiKey}`;\n        \n        try {\n            const response = await axios.get(url);\n            return response.data.results[0].geometry.location;\n        } catch (error) {\n            console.error('Error fetching data from Geocoding API', error);\n        }\n    };\n\n    return (\n        \n            
\n                \n