\uc6f9 \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc744 \uac1c\ubc1c\ud560 \ub54c \uc9c0\ub3c4 \uae30\ub2a5\uc740 \uc0ac\uc6a9\uc790\uc5d0\uac8c \ub9e4\uc6b0 \uc911\uc694\ud55c \uc694\uc18c\uc785\ub2c8\ub2e4. \ub2e4\uc591\ud55c \uc9c0\ub3c4 API\uac00 \uc874\uc7ac\ud558\uba70, \uac01 API\ub294 \uace0\uc720\ud55c \ud2b9\uc9d5\uacfc \uc7a5\ub2e8\uc810\uc744 \uac00\uc9c0\uace0 \uc788\uc2b5\ub2c8\ub2e4. \uc774 \uae00\uc5d0\uc11c\ub294 Google Maps, Leaflet \ubc0f Mapbox \uc774 \uc138 \uac00\uc9c0 \uc8fc\uc694 \uc9c0\ub3c4 API\uc758 \ucc28\uc774\uc810\uc744 \ube44\uad50\ud558\uace0 \uc5b4\ub5a4 \uc0c1\ud669\uc5d0\uc11c \uac01\uac01\uc758 API\ub97c \uc0ac\uc6a9\ud574\uc57c \ud558\ub294\uc9c0\uc5d0 \ub300\ud574 \ud0d0\uad6c\ud574\ubcf4\uaca0\uc2b5\ub2c8\ub2e4.<\/p>\n
\uc9c0\ub3c4 API(Application Programming Interface)\ub294 \uac1c\ubc1c\uc790\uac00 \uc9c0\ub3c4\uc640 \uad00\ub828\ub41c \uae30\ub2a5\uc744 \uc6f9 \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc5d0 \ud1b5\ud569\ud560 \uc218 \uc788\ub3c4\ub85d \ud558\ub294 \uc778\ud130\ud398\uc774\uc2a4\uc785\ub2c8\ub2e4. \uc774\ub7ec\ud55c API\ub97c \ud1b5\ud574 \uac1c\ubc1c\uc790\ub294 \uc704\uce58 \uc815\ubcf4, \uacbd\ub85c \ud0d0\uc0c9, \uc7a5\uc18c \uac80\uc0c9 \ub4f1\uc758 \ub2e4\uc591\ud55c \uae30\ub2a5\uc744 \uc27d\uac8c \uad6c\ud604\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n
Google Maps API\ub294 Google\uc5d0\uc11c \uc81c\uacf5\ud558\ub294 \uc9c0\ub3c4 \uc11c\ube44\uc2a4\ub85c, \ub9e4\uc6b0 \ubc29\ub300\ud55c \ub370\uc774\ud130\uc640 \ub2e4\uc591\ud55c \uae30\ub2a5\uc744 \uc81c\uacf5\ud569\ub2c8\ub2e4. \uc0ac\uc6a9\uc790 \uc704\uce58 \uae30\ubc18 \uc11c\ube44\uc2a4, \uacbd\ub85c \ud0d0\uc0c9, \uc7a5\uc18c \uac80\uc0c9 \ubc0f \uac70\ub9ac \uacc4\uc0b0 \ub4f1 \uc5ec\ub7ec \uae30\ub2a5\uc744 \uc9c0\uc6d0\ud569\ub2c8\ub2e4.<\/p>\n
\ub2e4\uc74c\uc740 Google Maps API\ub97c \uc0ac\uc6a9\ud558\uc5ec \uac04\ub2e8\ud55c \uc9c0\ub3c4\ub97c \uc0dd\uc131\ud558\ub294 \uc608\uc81c \ucf54\ub4dc\uc785\ub2c8\ub2e4.<\/p>\n
<\/code><\/p>\n Leaflet\uc740 \uc624\ud508 \uc18c\uc2a4 JavaScript \ub77c\uc774\ube0c\ub7ec\ub9ac\ub85c, \uc8fc\ub85c \ubaa8\ubc14\uc77c \uce5c\ud654\uc801\uc778 \uc778\ud130\ub799\ud2f0\ube0c\ud55c \uc9c0\ub3c4\ub97c \ub9cc\ub4dc\ub294 \ub370 \uc0ac\uc6a9\ub429\ub2c8\ub2e4. \uac04\ub2e8\ud558\uace0 \uc9c1\uad00\uc801\uc778 API\ub97c \uc81c\uacf5\ud569\ub2c8\ub2e4.<\/p>\n \ub2e4\uc74c\uc740 Leaflet\uc744 \uc0ac\uc6a9\ud558\uc5ec \uc9c0\ub3c4\ub97c \uc0dd\uc131\ud558\ub294 \uc608\uc81c \ucf54\ub4dc\uc785\ub2c8\ub2e4.<\/p>\n <\/code><\/p>\n Mapbox\ub294 \uc0ac\uc6a9\uc790 \uc815\uc758 \uac00\ub2a5\ud55c \uc778\ud130\ub799\ud2f0\ube0c\ud55c \ub9f5\uc744 \ub9cc\ub4e4 \uc218 \uc788\ub294 \ud50c\ub7ab\ud3fc\uc73c\ub85c, \uc8fc\ub85c \ub370\uc774\ud130 \uc2dc\uac01\ud654\uc640 \uc815\uad50\ud55c \uc0ac\uc6a9\uc790 \uacbd\ud5d8 \uc694\uad6c\uc5d0 \uc801\ud569\ud569\ub2c8\ub2e4.<\/p>\n \ub2e4\uc74c\uc740 Mapbox\ub97c \uc0ac\uc6a9\ud558\uc5ec \uc9c0\ub3c4\ub97c \uc0dd\uc131\ud558\ub294 \uc608\uc81c \ucf54\ub4dc\uc785\ub2c8\ub2e4.<\/p>\n <\/code><\/p>\n \uc9c0\ub3c4 API\ub97c \uc120\ud0dd\ud560 \ub54c, \ud2b9\uc815 \uc870\uac74\uacfc \uc694\uad6c \uc0ac\ud56d\uc5d0 \ub530\ub77c \uc120\ud0dd \uae30\uc900\uc774 \ub2ec\ub77c\uc9c8 \uc218 \uc788\uc2b5\ub2c8\ub2e4. \ub2e4\uc74c\uc740 \uace0\ub824\ud574\uc57c \ud560 \uc8fc\uc694 \uc694\uc18c\uc785\ub2c8\ub2e4.<\/p>\n Google Maps, Leaflet, Mapbox\ub294 \uac01\uac01\uc758 \uc7a5\ub2e8\uc810\uc774 \uc788\uc73c\uba70, \ud504\ub85c\uc81d\ud2b8\uc758 \uc694\uad6c \uc0ac\ud56d\uacfc \uac1c\ubc1c\uc790\uc758 \ud3b8\uc758\uc131\uc5d0 \ub530\ub77c \uc801\ud569\ud55c API\ub97c \uc120\ud0dd\ud574\uc57c \ud569\ub2c8\ub2e4. \uba3c\uc800 \ud544\uc694 \uae30\ub2a5\uc744 \uba85\ud655\ud788 \ud558\uace0, \uadf8\uc5d0 \ub9de\ub294 \uc635\uc158\uc744 \uc120\ud0dd\ud568\uc73c\ub85c\uc368 \ud6a8\uacfc\uc801\uc778 \uc9c0\ub3c4 \uae30\ub2a5\uc744 \uc6f9 \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc5d0 \ud1b5\ud569\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4. \ucd5c\uc885 \uc120\ud0dd\uc740 \uc694\uad6c \uc0ac\ud56d, \uc608\uc0b0 \ubc0f \uac1c\ubc1c \ud658\uacbd \ub4f1\uc744 \uc885\ud569\uc801\uc73c\ub85c \uace0\ub824\ud558\uc5ec \uc2e0\uc911\ud788 \uacb0\uc815\ud574\uc57c \ud569\ub2c8\ub2e4.<\/p>\n <\/body><\/p>\n","protected":false},"excerpt":{"rendered":"<\/p>\n\n <!DOCTYPE html>\n <html>\n <head>\n <script src=\"https:\/\/maps.googleapis.com\/maps\/api\/js?key=YOUR_API_KEY\"><\/script>\n <style>\n #map {\n height: 400px;\n width: 100%;\n }\n <\/style>\n <\/head>\n <body>\n <div id=\"map\"><\/div>\n <script>\n function initMap() {\n var myLatLng = {lat: -25.363, lng: 131.044};\n var map = new google.maps.Map(document.getElementById('map'), {\n zoom: 4,\n center: myLatLng\n });\n var marker = new google.maps.Marker({\n position: myLatLng,\n map: map,\n title: 'Hello World!'\n });\n }\n window.onload = initMap;\n <\/script>\n <\/body>\n <\/html>\n <\/pre>\n3. Leaflet<\/h2>\n
3.1 \uac1c\uc694<\/h3>\n
3.2 \uc7a5\uc810<\/h3>\n
\n
3.3 \ub2e8\uc810<\/h3>\n
\n
3.4 \uc608\uc81c \ucf54\ub4dc<\/h3>\n
<\/p>\n\n <!DOCTYPE html>\n <html>\n <head>\n <link rel=\"stylesheet\" href=\"https:\/\/unpkg.com\/leaflet\/dist\/leaflet.css\" \/>\n <script src=\"https:\/\/unpkg.com\/leaflet\/dist\/leaflet.js\"><\/script>\n <style>\n #map {\n height: 400px;\n width: 100%;\n }\n <\/style>\n <\/head>\n <body>\n <div id=\"map\"><\/div>\n <script>\n var map = L.map('map').setView([-25.363, 131.044], 4);\n L.tileLayer('https:\/\/{s}.tile.openstreetmap.org\/{z}\/{x}\/{y}.png', {\n maxZoom: 19,\n }).addTo(map);\n var marker = L.marker([-25.363, 131.044]).addTo(map)\n .bindPopup('Hello World!')\n .openPopup();\n <\/script>\n <\/body>\n <\/html>\n <\/pre>\n4. Mapbox<\/h2>\n
4.1 \uac1c\uc694<\/h3>\n
4.2 \uc7a5\uc810<\/h3>\n
\n
4.3 \ub2e8\uc810<\/h3>\n
\n
4.4 \uc608\uc81c \ucf54\ub4dc<\/h3>\n
<\/p>\n\n <!DOCTYPE html>\n <html>\n <head>\n <link href=\"https:\/\/api.mapbox.com\/mapbox-gl-js\/v2.6.1\/mapbox-gl.css\" rel=\"stylesheet\" \/>\n <script src=\"https:\/\/api.mapbox.com\/mapbox-gl-js\/v2.6.1\/mapbox-gl.js\"><\/script>\n <style>\n #map {\n height: 400px;\n width: 100%;\n }\n <\/style>\n <\/head>\n <body>\n <div id=\"map\"><\/div>\n <script>\n mapboxgl.accessToken = 'YOUR_MAPBOX_ACCESS_TOKEN';\n const map = new mapboxgl.Map({\n container: 'map',\n style: 'mapbox:\/\/styles\/mapbox\/streets-v11',\n center: [131.044, -25.363],\n zoom: 4\n });\n const marker = new mapboxgl.Marker()\n .setLngLat([131.044, -25.363])\n .setPopup(new mapboxgl.Popup().setText('Hello World!'))\n .addTo(map);\n <\/script>\n <\/body>\n <\/html>\n <\/pre>\n5. \uac01 API\uc758 \uc120\ud0dd \uae30\uc900<\/h2>\n
\n
6. \uacb0\ub860<\/h2>\n