{"id":20887,"date":"2022-04-16T00:08:14","date_gmt":"2022-04-15T23:08:14","guid":{"rendered":"https:\/\/nelkodev.com\/?p=20887"},"modified":"2024-06-03T18:41:05","modified_gmt":"2024-06-03T17:41:05","slug":"como-obtener-la-ip-publica-y-la-ubicacion-con-javascript","status":"publish","type":"post","link":"https:\/\/nelkodev.com\/en\/php\/how-to-get-the-public-ip-and-location-with-javascript\/","title":{"rendered":"How to get public IP and location with Javascript"},"content":{"rendered":"<div data-elementor-type=\"wp-post\" data-elementor-id=\"20887\" class=\"elementor elementor-20887\" data-elementor-post-type=\"post\">\n\t\t\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-4fe88af1 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"4fe88af1\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-6a2eef61\" data-id=\"6a2eef61\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-1ef3f70d elementor-widget elementor-widget-text-editor\" data-id=\"1ef3f70d\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>In this code example we are going to see how we can obtain the public IP of a visitor with their location data using the api.apify.org and ipwhois.app API using Javascript with Fetch requests showing the data on the screen through a grid formed with CSS so that we can view the data obtained through the 2 APIs at all times.<\/p><div id=\"ez-toc-container\" class=\"ez-toc-v2_0_80 counter-hierarchy ez-toc-counter ez-toc-custom ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Table of Contents<\/p>\n<span class=\"ez-toc-title-toggle\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"Toggle Table of Content\"><span class=\"ez-toc-js-icon-con\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #ffffff;color:#ffffff\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #ffffff;color:#ffffff\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewbox=\"0 0 24 24\" version=\"1.2\" baseprofile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/nelkodev.com\/en\/php\/how-to-get-the-public-ip-and-location-with-javascript\/#Ejemplo_de_consulta_de_IP_Ubicacion\" >IP + Location query example:<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/nelkodev.com\/en\/php\/how-to-get-the-public-ip-and-location-with-javascript\/#Codigo_de_ejemplo\" >Example code:<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/nelkodev.com\/en\/php\/how-to-get-the-public-ip-and-location-with-javascript\/#Observaciones\" >Observations:<\/a><\/li><\/ul><\/nav><\/div>\n<h2><span class=\"ez-toc-section\" id=\"Ejemplo_de_consulta_de_IP_Ubicacion\"><\/span>IP + Location query example:<span class=\"ez-toc-section-end\"><\/span><\/h2>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-d5251f6 elementor-widget elementor-widget-image\" data-id=\"d5251f6\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img fetchpriority=\"high\" decoding=\"async\" width=\"800\" height=\"283\" src=\"https:\/\/nelkodev.com\/wp-content\/uploads\/2022\/04\/ip-y-ubicacion-mediante-javascript-1024x362.png\" class=\"attachment-large size-large wp-image-20893\" alt=\"\" srcset=\"https:\/\/nelkodev.com\/wp-content\/uploads\/2022\/04\/ip-y-ubicacion-mediante-javascript.png 1024w, https:\/\/nelkodev.com\/wp-content\/uploads\/2022\/04\/ip-y-ubicacion-mediante-javascript-600x212.png 600w, https:\/\/nelkodev.com\/wp-content\/uploads\/2022\/04\/ip-y-ubicacion-mediante-javascript-300x106.png 300w, https:\/\/nelkodev.com\/wp-content\/uploads\/2022\/04\/ip-y-ubicacion-mediante-javascript-768x272.png 768w, https:\/\/nelkodev.com\/wp-content\/uploads\/2022\/04\/ip-y-ubicacion-mediante-javascript-1536x543.png 1536w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-a8ce4f9 elementor-widget elementor-widget-text-editor\" data-id=\"a8ce4f9\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>You can use the example code to use in your apps or learn how to use these location APIS, which are often useful when we want to work with filters or results using location data directly in our front-end.<\/p><h2><span class=\"ez-toc-section\" id=\"Codigo_de_ejemplo\"><\/span>Example code:<span class=\"ez-toc-section-end\"><\/span><\/h2>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-bc8ec03 elementor-widget elementor-widget-code-highlight\" data-id=\"bc8ec03\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-tomorrow copy-to-clipboard\">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-javascript line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-javascript\">\n\t\t\t\t\t<xmp><!DOCTYPE html>\r\n<html lang=\"es\">\r\n    <head>\r\n        <meta charset=\"UTF-8\">\r\n        <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\r\n        <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\r\n        <title>Get IP and Location data with Javascript<\/title>\r\n    \r\n\r\n    <style>\r\n\r\n    body {\r\n        margin: 0 auto;\r\n        padding: 0 auto;\r\n    }\r\n\r\n    .grid-3 {\r\n      display: grid;\r\n      background: rgb(255, 255, 255);\r\n      width: 100%;\r\n      max-width: 1280px;\r\n      margin: 0 auto;\r\n      grid-template-columns: repeat(3, 1fr);\r\n      grid-gap: 5pxpx;\r\n      \r\n    }\r\n    \r\n    .item {\r\n        background-color: #ccc;\r\n        padding: 10px 10px;\r\n        box-shadow: 2px 5px 5px rgba(0, 0, 0, 0.374);\r\n        border-radius: 10px;\r\n        margin: 10px 10px;\r\n    }\r\n    \r\n    .result {\r\n        padding: 5px 10px;\r\n        border: 1px solid rgb(9, 161, 237);\r\n        border-radius: 10px;\r\n        margin-left: 5px;\r\n        background: #fff;\r\n    \r\n    }\r\n    \r\n    <\/style>\r\n    <\/head>\r\n    <body>\r\n\r\n        <div id=\"connection-data\" class=\"grid-3\">\r\n            <div class=\"item\" id=\"ip\">\r\n                <p>IP: <span class=\"result\"><\/span><\/p>\r\n            <\/div>\r\n            <div class=\"item\" id=\"city\">\r\n                <p>City: <span class=\"result\"><\/span><\/p>\r\n            <\/div>\r\n            <div class=\"item\" id=\"continent\">\r\n                <p>Mainland: <span class=\"result\"><\/span><\/p>\r\n            <\/div>\r\n            <div class=\"item\" id=\"country\">\r\n                <p>Country: <span class=\"result\"><\/span><\/p>\r\n            <\/div>\r\n            <div class=\"item\" id=\"country_capital\">\r\n                <p>Country_capital: <span class=\"result\"><\/span><\/p>\r\n            <\/div>\r\n            <div class=\"item\" id=\"country_code\">\r\n                <p>Country_code: <span class=\"result\"><\/span><\/p>\r\n            <\/div>\r\n            <div class=\"item\" id=\"country_phone\">\r\n                <p>Country_phone: <span class=\"result\"><\/span><\/p>\r\n            <\/div>\r\n            <div class=\"item\" id=\"currency\">\r\n                <p>Currency: <span class=\"result\"><\/span><\/p>\r\n            <\/div>\r\n            <div class=\"item\" id=\"currency_rates\">\r\n                <p>Currency_rates: <span class=\"result\"><\/span><\/p>\r\n            <\/div>\r\n            <div class=\"item\" id=\"isp\">\r\n                <p>ISP: <span class=\"result\"><\/span><\/p>\r\n            <\/div>\r\n            <div class=\"item\" id=\"latitude\">\r\n                <p>Latitude: <span class=\"result\"><\/span><\/p>\r\n            <\/div>\r\n            <div class=\"item\" id=\"longitude\">\r\n                <p>Longitude: <span class=\"result\"><\/span><\/p>\r\n            <\/div>\r\n            <div class=\"item\" id=\"region\">\r\n                <p>Region: <span class=\"result\"><\/span><\/p>\r\n            <\/div>\r\n            <div class=\"item\" id=\"timezone\">\r\n                <p>Timezone: <span class=\"result\"><\/span><\/p>\r\n            <\/div>\r\n        <\/div>\r\n\r\n    <\/body>\r\n<\/html>\r\n\r\n<script>\r\n    window.onload = () => {\r\n\r\n        let userIP = null;\r\n\r\n        const getIP = async () => {\r\n            \r\n            return await fetch('https:\/\/api.ipify.org?format=json')\r\n            .then(response => response.json());\r\n        }\r\n\r\n        const getInfo = async (ip) => {\r\n            \r\n            \/*\r\n                https:\/\/ipstack.com\/\r\n                https:\/\/ipwhois.io\/\r\n                https:\/\/ipapi.co\/\r\n            *\/\r\n           \r\n            return await fetch('https:\/\/ipwhois.app\/json\/' + ip + '?lang=es')\r\n            .then(response => response.json());\r\n        }\r\n\r\n        \r\n        getIP().then(response => {\r\n            userIP = response.ip;\r\n            getInfo(userIP).then(location => {\r\n\r\n                \r\n\r\n                if(location){\r\n                    document.querySelector('#ip p span').innerHTML = userIP;\r\n                    document.querySelector('#city p span').innerHTML = location.city ?? 'error';\r\n                    document.querySelector('#continent p span').innerHTML = location.continent ?? 'error';\r\n                    document.querySelector('#country p span').innerHTML = location.country ?? 'error';\r\n                    document.querySelector('#country_capital p span').innerHTML = location.country_capital ?? 'error';\r\n                    document.querySelector('#country_code p span').innerHTML = location.country_code ?? 'error';\r\n                    document.querySelector('#country_phone p span').innerHTML = location.country_phone ?? 'error';\r\n                    document.querySelector('#currency p span').innerHTML = location.currency ?? 'error';\r\n                    document.querySelector('#currency_rates p span').innerHTML = location.currency_rates ?? 'error';\r\n                    document.querySelector('#isp p span').innerHTML = location.isp ?? 'error';\r\n                    document.querySelector('#latitude p span').innerHTML = location.latitude ?? 'error';\r\n                    document.querySelector('#longitude p span').innerHTML = location.longitude ?? 'error';\r\n                    document.querySelector('#region p span').innerHTML = location.region ?? 'error';\r\n                    document.querySelector('#timezone p span').innerHTML = location.timezone ?? 'error';\r\n                }\r\n            })\r\n\r\n        });\r\n    }\r\n<\/script><\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-0cb8384 elementor-widget elementor-widget-text-editor\" data-id=\"0cb8384\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>The APIS used in the example are free as of April 16, 2022. This is important since these types of APIS usually transition to premium methods quite easily or are limited to X requests per day. It is advisable to review the documentation of each API to know limits or prices according to our needs.<\/p><h2><span class=\"ez-toc-section\" id=\"Observaciones\"><\/span>Observations:<span class=\"ez-toc-section-end\"><\/span><\/h2><p>In the same way that we are obtaining the data using Fetch directly on the front end, we can also use the same urls to make Curls requests from the backend with another type of programming language such as php or python.<\/p><p><strong>Did you find this information useful?<\/strong> Follow me on my social networks for more content like this. And if you have questions or know another way to do it, I encourage you to comment on this post.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>","protected":false},"excerpt":{"rendered":"<p>En este ejemplo de c\u00f3digo vamos a ver como podemos obtener la IP p\u00fablica de un visitante con sus datos de ubicaci\u00f3n utilizando la API de api.apify.org e ipwhois.app utilizando Javascript con peticiones Fetch mostrando los datos en pantalla mediante una grilla formada con CSS para que podamos visualizar en todo momento los datos obtenidos [&hellip;]<\/p>","protected":false},"author":1,"featured_media":20902,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[2206,30,16],"tags":[38,90,33,185,35,182,15,101,184,183],"class_list":["post-20887","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-php","category-javascript","category-programacion","tag-como","tag-con","tag-digital","tag-javascript","tag-marketing","tag-obtener","tag-php","tag-programacion","tag-publica","tag-ubicacion"],"_links":{"self":[{"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/posts\/20887","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/comments?post=20887"}],"version-history":[{"count":0,"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/posts\/20887\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/media\/20902"}],"wp:attachment":[{"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/media?parent=20887"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/categories?post=20887"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/tags?post=20887"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}