\n \ud604\ub300 \uc6f9 \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc5d0\uc11c \uc9c0\ub3c4\ub294 \ud544\uc218\uc801\uc778 \uc694\uc18c\ub85c \uc790\ub9ac \uc7a1\uace0 \uc788\uc2b5\ub2c8\ub2e4. \ud2b9\ud788 \ud504\ub860\ud2b8\uc564\ub4dc \uac1c\ubc1c\uc5d0\uc11c\ub294 \ub2e4\uc591\ud55c \uc9c0\ub3c4 API\ub97c \ud65c\uc6a9\ud558\uc5ec \uc0ac\uc6a9\uc790\uac00 \uc694\uad6c\ud558\ub294 \uae30\ub2a5\uc744 \uc190\uc27d\uac8c \uad6c\ud604\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4. \n \uad6c\uae00 \ub9f5\uc2a4 API\ub294 \uac00\uc7a5 \ub110\ub9ac \uc0ac\uc6a9\ub418\ub294 \uc9c0\ub3c4 \uc11c\ube44\uc2a4 \uc911 \ud558\ub098\ub85c, \ub2e4\uc591\ud55c \uae30\ub2a5\uacfc \uc0ac\uc6a9\uc790 \uc815\uc758\uac00 \uac00\ub2a5\ud569\ub2c8\ub2e4. \uc544\ub798\ub294 \ub9ac\uc561\ud2b8\uc5d0\uc11c \uad6c\uae00 \ub9f5\uc744 \uc0ac\uc6a9\ud558\ub294 \uac04\ub2e8\ud55c \uc608\uc81c \ucf54\ub4dc\ub97c \ubcf4\uc5ec\uc90d\ub2c8\ub2e4.<\/p>\n \n \uc624\ud508\uc2a4\ud2b8\ub9ac\ud2b8\ub9f5(OSM)\uc740 \uc0ac\uc6a9\uc790\uac00 \uc9c1\uc811 \ub370\uc774\ud130\ub97c \uc81c\uacf5\ud558\uc5ec \ub9cc\ub4e0 \uc9c0\ub3c4 \uc11c\ube44\uc2a4\uc785\ub2c8\ub2e4. \uc544\ub798\ub294 \ub9ac\uc561\ud2b8\uc5d0\uc11c \uc624\ud508\uc2a4\ud2b8\ub9ac\ud2b8\ub9f5\uc744 \uc0ac\uc6a9\ud558\ub294 \uc608\uc81c \ucf54\ub4dc\uc785\ub2c8\ub2e4.<\/p>\n \n \ub124\uc774\ubc84 \uc9c0\ub3c4 API\ub294 \ud55c\uad6d\uc5d0\uc11c \ub9e4\uc6b0 \uc778\uae30\uac00 \uc788\uc73c\uba70, \ud2b9\ud788 \ud55c\uad6d \ub0b4\uc5d0\uc11c\uc758 \uc704\uce58 \uc815\ubcf4\uac00 \uc911\uc694\ud560 \ub54c \ub9ce\uc740 \uc774\uc810\uc744 \uc81c\uacf5\ud569\ub2c8\ub2e4.\n<\/p>\n \uc544\ub798\ub294 \ub9ac\uc561\ud2b8\uc5d0\uc11c \ub124\uc774\ubc84 \uc9c0\ub3c4\ub97c \uc0ac\uc6a9\ud558\ub294 \uc608\uc81c \ucf54\ub4dc\uc785\ub2c8\ub2e4.<\/p>\n \n \uce74\uce74\uc624 \uc9c0\ub3c4 API\ub294 \uce74\uce74\uc624\uc758 \uc11c\ube44\uc2a4 \uc5f0\ub3d9\uc774 \uac00\ub2a5\ud558\uc5ec, \ud2b9\ud788 \ud55c\uad6d \uc0ac\uc6a9\uc790\ub4e4\uc5d0\uac8c \uc720\uc6a9\ud55c API\uc785\ub2c8\ub2e4. \uc544\ub798\ub294 \ub9ac\uc561\ud2b8\uc5d0\uc11c \uce74\uce74\uc624 \uc9c0\ub3c4\ub97c \uc0ac\uc6a9\ud558\ub294 \uc608\uc81c \ucf54\ub4dc\uc785\ub2c8\ub2e4.<\/p>\n
\n \ubcf8 \uae00\uc5d0\uc11c\ub294 \uad6c\uae00 \ub9f5\uc2a4 API<\/strong>, \uc624\ud508\uc2a4\ud2b8\ub9ac\ud2b8\ub9f5<\/strong>, \ub124\uc774\ubc84 \uc9c0\ub3c4 API<\/strong>, \uce74\uce74\uc624 \uc9c0\ub3c4 API<\/strong> \ub4f1 \ub124 \uac00\uc9c0 \uc8fc\uc694 \uc9c0\ub3c4 API\uc5d0 \ub300\ud574 \uc54c\uc544\ubcf4\uace0,
\n \uac01 API\ubcc4\ub85c \uc81c\uacf5\ud558\ub294 \ud2b9\ud654\ub41c \uae30\ub2a5\uacfc \ub9ac\uc561\ud2b8\ub97c \ud65c\uc6a9\ud55c \uc608\uc81c \ucf54\ub4dc\ub97c \uc81c\uacf5\ud558\uaca0\uc2b5\ub2c8\ub2e4.\n<\/p>\n1. \uad6c\uae00 \ub9f5\uc2a4 API<\/h2>\n
\uad6c\uae00 \ub9f5\uc2a4 API \uac1c\uc694<\/h3>\n
\n \ubcf4\ud1b5 \uc2e4\uc2dc\uac04 \uad50\ud1b5\uc815\ubcf4, \uc7a5\uc18c \uac80\uc0c9, \uac70\ub9ac \uce21\uc815 \ub4f1 \uc5ec\ub7ec \uae30\ub2a5\uc744 \uc81c\uacf5\ud558\uc5ec \uc0ac\uc6a9\uc790 \uacbd\ud5d8\uc744 \uadf9\ub300\ud654\ud569\ub2c8\ub2e4.\n<\/p>\n\uad6c\uae00 \ub9f5\uc2a4 API \uc8fc\uc694 \uae30\ub2a5<\/h3>\n
\n
\uad6c\uae00 \ub9f5\uc2a4 API \ub9ac\uc561\ud2b8 \uc608\uc81c<\/h3>\n
\nimport React, { useEffect, useRef } from 'react';\n\nconst GoogleMap = () => {\n const mapRef = useRef(null);\n\n useEffect(() => {\n const map = new window.google.maps.Map(mapRef.current, {\n center: { lat: 37.5665, lng: 126.978 },\n zoom: 10,\n });\n\n new window.google.maps.Marker({\n position: { lat: 37.5665, lng: 126.978 },\n map: map,\n title: '\uc11c\uc6b8',\n });\n }, []);\n\n return 2. \uc624\ud508\uc2a4\ud2b8\ub9ac\ud2b8\ub9f5<\/h2>\n
\uc624\ud508\uc2a4\ud2b8\ub9ac\ud2b8\ub9f5 \uac1c\uc694<\/h3>\n
\n \ubb34\ub8cc\ub85c \uc81c\uacf5\ub418\uba70, \ub2e4\uc591\ud55c \uc11c\ube44\uc2a4\uc640 \uc5f0\ub3d9\ub418\ub294 API\uac00 \uc788\uc5b4 \ub9e4\uc6b0 \uc720\uc6a9\ud569\ub2c8\ub2e4.\n<\/p>\n\uc624\ud508\uc2a4\ud2b8\ub9ac\ud2b8\ub9f5 \uc8fc\uc694 \uae30\ub2a5<\/h3>\n
\n
\uc624\ud508\uc2a4\ud2b8\ub9ac\ud2b8\ub9f5 \ub9ac\uc561\ud2b8 \uc608\uc81c<\/h3>\n
\nimport React from 'react';\nimport { MapContainer, TileLayer, Marker, Popup } from 'react-leaflet';\n\nconst OpenStreetMap = () => {\n return (\n 3. \ub124\uc774\ubc84 \uc9c0\ub3c4 API<\/h2>\n
\ub124\uc774\ubc84 \uc9c0\ub3c4 API \uac1c\uc694<\/h3>\n
\ub124\uc774\ubc84 \uc9c0\ub3c4 API \uc8fc\uc694 \uae30\ub2a5<\/h3>\n
\n
\ub124\uc774\ubc84 \uc9c0\ub3c4 API \ub9ac\uc561\ud2b8 \uc608\uc81c<\/h3>\n
\nimport React, { useEffect } from 'react';\n\nconst NaverMap = () => {\n useEffect(() => {\n const naver = window.naver;\n const map = new naver.maps.Map('map', {\n center: new naver.maps.LatLng(37.5665, 126.978),\n zoom: 10,\n });\n\n const marker = new naver.maps.Marker({\n position: new naver.maps.LatLng(37.5665, 126.978),\n map: map,\n });\n }, []);\n\n return 4. \uce74\uce74\uc624 \uc9c0\ub3c4 API<\/h2>\n
\uce74\uce74\uc624 \uc9c0\ub3c4 API \uac1c\uc694<\/h3>\n
\n \ub2e4\uc591\ud55c \ubd80\uac00 \uae30\ub2a5\uc744 \uc9c0\uc6d0\ud558\uc5ec \ub9ac\uc561\ud2b8\uc640 \ud568\uaed8 \uc0ac\uc6a9\ud558\uae30\uc5d0 \uc801\ud569\ud569\ub2c8\ub2e4.\n<\/p>\n\uce74\uce74\uc624 \uc9c0\ub3c4 API \uc8fc\uc694 \uae30\ub2a5<\/h3>\n
\n
\uce74\uce74\uc624 \uc9c0\ub3c4 API \ub9ac\uc561\ud2b8 \uc608\uc81c<\/h3>\n
\nimport React, { useEffect } from 'react';\n\nconst KakaoMap = () => {\n useEffect(() => {\n const mapContainer = document.getElementById('map');\n const mapOption = {\n center: new window.kakao.maps.LatLng(37.5665, 126.978), \n level: 3 \n };\n\n const map = new window.kakao.maps.Map(mapContainer, mapOption); \n\n const marker = new window.kakao.maps.Marker({\n position: new window.kakao.maps.LatLng(37.5665, 126.978),\n map: map\n });\n }, []);\n\n return