Skip to main content
se añadieron 84 caracteres en el cuerpo; título editado
Origen Enlace
Israel-ICM
  • 3.6k
  • 25
  • 20
  • 26

Mostrar ubicacionubicación mediante la dirección ip

Tengo la siguiente pagina que es para saber la ubicacionubicación mediante la direcciondirección ip, tengo un input donde se ingresa la ip, al dar enter nos muestra unos datos en un div info que son la direcciondirección IP, la ubicacionubicación, la zona horaria y el isp, esos datos me los muestran bien cada que pongo otra ip, en el mapa, al ingresar por primera vez un ip me muestra los datos y su ubicacionubicación en el mapa, pero al poner otra ip, solo me cambia los datos y la ubicacionubicación se queda en el mismo lugar que la anterior, Alguna¿Alguna idea de como al poner otra ip tambientambién me de su ubicacionubicación en el mapa?.

HTML

<head>
    <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css"
    integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A=="
    crossorigin=""/>
    <script src="https://unpkg.com/[email protected]/dist/leaflet.js"
   integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA=="
   crossorigin=""></script>
</head>


<div class="container">
        <header>
            <div class="content-header">
                <h1>IP Address Tracker</h1>
                <div class="input">
                    <input id="ip" type="text" placeholder="Search for any IP address or domain" v-model='query'>
                    <a href="#" class="btnBuscar" ><img src="images/icon-arrow.svg" id="search_btn"></a>
                </div>
                <div class="info" id="info">
                    <div class="ip tags">
                        <p>IP Address</p>
                        <div class="ip-info">
                            <span id="id"></span>
                        </div>
                    </div>

                    <div class="location tags">
                        <p>Location</p>
                        <div class="ip-info">
                            <span id="town"></span>
                        </div>
                    </div>

                    <div class="timezone tags">
                        <p>Timezone</p>
                        <div class="ip-info">
                            <span id="time"></span>
                        </div>
                    </div>

                    <div class="isp tags">
                        <p>ISP</p>
                        <div class="ip-info">
                            <span id="isp"></span>
                        </div>
                    </div>
                </div>
            </div>
        </header>

        <div class="map" id="map"> 

        </div>
    </div>

    <script src="https://unpkg.com/[email protected]/dist/leaflet.js"
  integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA=="
  crossorigin=""></script>

CSS

header {
    background-image: url(../images/pattern-bg.png);
    text-align: center;
    height: 250px;
    background-size: cover;
    background-position: center;
  }
  
  header .content-header {
    width: 90%;
    margin: 0 auto;
    position: relative;
  }
  
  header .content-header h1 {
    color: white;
    font-size: 1.3rem;
    font-weight: 400;
    padding: 20px 0;
  }
  
  header .content-header .input {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
  }
  
  header .content-header .input input {
    width: 90%;
    height: 45px;
    outline: none;
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
    border: none;
    padding: 0 10px;
    font-size: 1rem;
  }
  
  header .content-header .input img {
    background: black;
    padding: 17px 22px;
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
  }
  
  header .content-header .input img:hover {
    background: #2b2b2b;
    cursor: pointer;
  }
  
  header .content-header .info {
    background: white;
    border-radius: 14px;
    margin-top: 20px;
    position: absolute;
    left: 50%;
    z-index: 9999;
  }
  
  header .content-header .info p {
    color: #969696;
    font-size: .7rem;
    font-weight: 500;
    text-transform: uppercase;
    padding-top: 15px;
  }
  
  header .content-header .tags {
    height: 70px;
  }
  
  header .content-header .tags .ip-info span {
    color: black;
    font-size: 1.1rem;
    font-weight: 500;
  }

  header .content-header .tags .ip-info span p{
    color:black;
    font-size: 1.1rem;
    padding-top: 6px;
  }

  .map{
    width: 100%;
    height: 700px;
    z-index: 999;
  }
  

JS

ip.addEventListener('keypress', buscarIp)

function buscarIp(){
    teclaEnter = event.keyCode;
    if(teclaEnter == 13){
        let ipValor = document.querySelector('#ip').value
        let api = `https://geo.ipify.org/api/v1?apiKey=at_qp3qhS3ma9WCYqA4Y7teThm5gQW6p&ipAddress=${ipValor}`

        console.log(ipValor)
        

        fetch(api)
        .then(result => result.json())
        .then(data => {
            let id = document.getElementById('id');
            id.innerHTML = `
                <p>${data.ip}</p>
            `
            let town = document.getElementById('town');
            town.innerHTML = `
                <p>${data.location.city}</p>
            `
            let time = document.getElementById('time');
            time.innerHTML = `
                <p>${data.location.timezone}</p>
            `
            let isp = document.getElementById('isp');
            isp.innerHTML = `
                <p>${data.isp}</p>
            `
            let long = data.location.lat;
            let lat = data.location.lng;
            console.log(long,lat)
            
            console.log(data)

            let map = L.map('map').setView([`${long}`, `${lat}`], 13);
                L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
                attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
            }).addTo(map);

            L.marker([`${long}`, `${lat}`]).addTo(map)
                .openPopup();
        })
        .catch(err => console.log(err))
    }
}
header {
    background-image: url(../images/pattern-bg.png);
    text-align: center;
    height: 250px;
    background-size: cover;
    background-position: center;
  }
  
  header .content-header {
    width: 90%;
    margin: 0 auto;
    position: relative;
  }
  
  header .content-header h1 {
    color: white;
    font-size: 1.3rem;
    font-weight: 400;
    padding: 20px 0;
  }
  
  header .content-header .input {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
  }
  
  header .content-header .input input {
    width: 90%;
    height: 45px;
    outline: none;
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
    border: none;
    padding: 0 10px;
    font-size: 1rem;
  }
  
  header .content-header .input img {
    background: black;
    padding: 17px 22px;
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
  }
  
  header .content-header .input img:hover {
    background: #2b2b2b;
    cursor: pointer;
  }
  
  header .content-header .info {
    background: white;
    border-radius: 14px;
    margin-top: 20px;
    position: absolute;
    left: 50%;
    z-index: 9999;
  }
  
  header .content-header .info p {
    color: #969696;
    font-size: .7rem;
    font-weight: 500;
    text-transform: uppercase;
    padding-top: 15px;
  }
  
  header .content-header .tags {
    height: 70px;
  }
  
  header .content-header .tags .ip-info span {
    color: black;
    font-size: 1.1rem;
    font-weight: 500;
  }

  header .content-header .tags .ip-info span p{
    color:black;
    font-size: 1.1rem;
    padding-top: 6px;
  }

  .map{
    width: 100%;
    height: 700px;
    z-index: 999;
  }
<head>
    <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css"
    integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A=="
    crossorigin=""/>
    <script src="https://unpkg.com/[email protected]/dist/leaflet.js"
   integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA=="
   crossorigin=""></script>
</head>


<div class="container">
        <header>
            <div class="content-header">
                <h1>IP Address Tracker</h1>
                <div class="input">
                    <input id="ip" type="text" placeholder="Search for any IP address or domain" v-model='query'>
                    <a href="#" class="btnBuscar" ><img src="images/icon-arrow.svg" id="search_btn"></a>
                </div>
                <div class="info" id="info">
                    <div class="ip tags">
                        <p>IP Address</p>
                        <div class="ip-info">
                            <span id="id"></span>
                        </div>
                    </div>

                    <div class="location tags">
                        <p>Location</p>
                        <div class="ip-info">
                            <span id="town"></span>
                        </div>
                    </div>

                    <div class="timezone tags">
                        <p>Timezone</p>
                        <div class="ip-info">
                            <span id="time"></span>
                        </div>
                    </div>

                    <div class="isp tags">
                        <p>ISP</p>
                        <div class="ip-info">
                            <span id="isp"></span>
                        </div>
                    </div>
                </div>
            </div>
        </header>

        <div class="map" id="map"> 

        </div>
    </div>

    <script src="https://unpkg.com/[email protected]/dist/leaflet.js"
  integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA=="
  crossorigin=""></script>
ip.addEventListener('keypress', buscarIp)

function buscarIp(){
    teclaEnter = event.keyCode;
    if(teclaEnter == 13){
        let ipValor = document.querySelector('#ip').value
        let api = `https://geo.ipify.org/api/v1?apiKey=at_qp3qhS3ma9WCYqA4Y7teThm5gQW6p&ipAddress=${ipValor}`

        console.log(ipValor)
        

        fetch(api)
        .then(result => result.json())
        .then(data => {
            let id = document.getElementById('id');
            id.innerHTML = `
                <p>${data.ip}</p>
            `
            let town = document.getElementById('town');
            town.innerHTML = `
                <p>${data.location.city}</p>
            `
            let time = document.getElementById('time');
            time.innerHTML = `
                <p>${data.location.timezone}</p>
            `
            let isp = document.getElementById('isp');
            isp.innerHTML = `
                <p>${data.isp}</p>
            `
            let long = data.location.lat;
            let lat = data.location.lng;
            console.log(long,lat)
            
            console.log(data)

            let map = L.map('map').setView([`${long}`, `${lat}`], 13);
                L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
                attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
            }).addTo(map);

            L.marker([`${long}`, `${lat}`]).addTo(map)
                .openPopup();
        })
        .catch(err => console.log(err))
    }
}
 

Mostrar ubicacion

Tengo la siguiente pagina que es para saber la ubicacion mediante la direccion ip, tengo un input donde se ingresa la ip, al dar enter nos muestra unos datos en un div info que son la direccion IP, la ubicacion, la zona horaria y el isp, esos datos me los muestran bien cada que pongo otra ip, en el mapa, al ingresar por primera vez un ip me muestra los datos y su ubicacion en el mapa, pero al poner otra ip, solo me cambia los datos y la ubicacion se queda en el mismo lugar que la anterior, Alguna idea de como al poner otra ip tambien me de su ubicacion en el mapa.

HTML

<head>
    <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css"
    integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A=="
    crossorigin=""/>
    <script src="https://unpkg.com/[email protected]/dist/leaflet.js"
   integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA=="
   crossorigin=""></script>
</head>


<div class="container">
        <header>
            <div class="content-header">
                <h1>IP Address Tracker</h1>
                <div class="input">
                    <input id="ip" type="text" placeholder="Search for any IP address or domain" v-model='query'>
                    <a href="#" class="btnBuscar" ><img src="images/icon-arrow.svg" id="search_btn"></a>
                </div>
                <div class="info" id="info">
                    <div class="ip tags">
                        <p>IP Address</p>
                        <div class="ip-info">
                            <span id="id"></span>
                        </div>
                    </div>

                    <div class="location tags">
                        <p>Location</p>
                        <div class="ip-info">
                            <span id="town"></span>
                        </div>
                    </div>

                    <div class="timezone tags">
                        <p>Timezone</p>
                        <div class="ip-info">
                            <span id="time"></span>
                        </div>
                    </div>

                    <div class="isp tags">
                        <p>ISP</p>
                        <div class="ip-info">
                            <span id="isp"></span>
                        </div>
                    </div>
                </div>
            </div>
        </header>

        <div class="map" id="map"> 

        </div>
    </div>

    <script src="https://unpkg.com/[email protected]/dist/leaflet.js"
  integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA=="
  crossorigin=""></script>

CSS

header {
    background-image: url(../images/pattern-bg.png);
    text-align: center;
    height: 250px;
    background-size: cover;
    background-position: center;
  }
  
  header .content-header {
    width: 90%;
    margin: 0 auto;
    position: relative;
  }
  
  header .content-header h1 {
    color: white;
    font-size: 1.3rem;
    font-weight: 400;
    padding: 20px 0;
  }
  
  header .content-header .input {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
  }
  
  header .content-header .input input {
    width: 90%;
    height: 45px;
    outline: none;
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
    border: none;
    padding: 0 10px;
    font-size: 1rem;
  }
  
  header .content-header .input img {
    background: black;
    padding: 17px 22px;
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
  }
  
  header .content-header .input img:hover {
    background: #2b2b2b;
    cursor: pointer;
  }
  
  header .content-header .info {
    background: white;
    border-radius: 14px;
    margin-top: 20px;
    position: absolute;
    left: 50%;
    z-index: 9999;
  }
  
  header .content-header .info p {
    color: #969696;
    font-size: .7rem;
    font-weight: 500;
    text-transform: uppercase;
    padding-top: 15px;
  }
  
  header .content-header .tags {
    height: 70px;
  }
  
  header .content-header .tags .ip-info span {
    color: black;
    font-size: 1.1rem;
    font-weight: 500;
  }

  header .content-header .tags .ip-info span p{
    color:black;
    font-size: 1.1rem;
    padding-top: 6px;
  }

  .map{
    width: 100%;
    height: 700px;
    z-index: 999;
  }
  

JS

ip.addEventListener('keypress', buscarIp)

function buscarIp(){
    teclaEnter = event.keyCode;
    if(teclaEnter == 13){
        let ipValor = document.querySelector('#ip').value
        let api = `https://geo.ipify.org/api/v1?apiKey=at_qp3qhS3ma9WCYqA4Y7teThm5gQW6p&ipAddress=${ipValor}`

        console.log(ipValor)
        

        fetch(api)
        .then(result => result.json())
        .then(data => {
            let id = document.getElementById('id');
            id.innerHTML = `
                <p>${data.ip}</p>
            `
            let town = document.getElementById('town');
            town.innerHTML = `
                <p>${data.location.city}</p>
            `
            let time = document.getElementById('time');
            time.innerHTML = `
                <p>${data.location.timezone}</p>
            `
            let isp = document.getElementById('isp');
            isp.innerHTML = `
                <p>${data.isp}</p>
            `
            let long = data.location.lat;
            let lat = data.location.lng;
            console.log(long,lat)
            
            console.log(data)

            let map = L.map('map').setView([`${long}`, `${lat}`], 13);
                L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
                attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
            }).addTo(map);

            L.marker([`${long}`, `${lat}`]).addTo(map)
                .openPopup();
        })
        .catch(err => console.log(err))
    }
}

Mostrar ubicación mediante la dirección ip

Tengo la siguiente pagina que es para saber la ubicación mediante la dirección ip, tengo un input donde se ingresa la ip, al dar enter nos muestra unos datos en un div info que son la dirección IP, la ubicación, la zona horaria y el isp, esos datos me los muestran bien cada que pongo otra ip, en el mapa, al ingresar por primera vez un ip me muestra los datos y su ubicación en el mapa, pero al poner otra ip, solo me cambia los datos y la ubicación se queda en el mismo lugar que la anterior, ¿Alguna idea de como al poner otra ip también me de su ubicación en el mapa?.

ip.addEventListener('keypress', buscarIp)

function buscarIp(){
    teclaEnter = event.keyCode;
    if(teclaEnter == 13){
        let ipValor = document.querySelector('#ip').value
        let api = `https://geo.ipify.org/api/v1?apiKey=at_qp3qhS3ma9WCYqA4Y7teThm5gQW6p&ipAddress=${ipValor}`

        console.log(ipValor)
        

        fetch(api)
        .then(result => result.json())
        .then(data => {
            let id = document.getElementById('id');
            id.innerHTML = `
                <p>${data.ip}</p>
            `
            let town = document.getElementById('town');
            town.innerHTML = `
                <p>${data.location.city}</p>
            `
            let time = document.getElementById('time');
            time.innerHTML = `
                <p>${data.location.timezone}</p>
            `
            let isp = document.getElementById('isp');
            isp.innerHTML = `
                <p>${data.isp}</p>
            `
            let long = data.location.lat;
            let lat = data.location.lng;
            console.log(long,lat)
            
            console.log(data)

            let map = L.map('map').setView([`${long}`, `${lat}`], 13);
                L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
                attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
            }).addTo(map);

            L.marker([`${long}`, `${lat}`]).addTo(map)
                .openPopup();
        })
        .catch(err => console.log(err))
    }
}
header {
    background-image: url(../images/pattern-bg.png);
    text-align: center;
    height: 250px;
    background-size: cover;
    background-position: center;
  }
  
  header .content-header {
    width: 90%;
    margin: 0 auto;
    position: relative;
  }
  
  header .content-header h1 {
    color: white;
    font-size: 1.3rem;
    font-weight: 400;
    padding: 20px 0;
  }
  
  header .content-header .input {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
  }
  
  header .content-header .input input {
    width: 90%;
    height: 45px;
    outline: none;
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
    border: none;
    padding: 0 10px;
    font-size: 1rem;
  }
  
  header .content-header .input img {
    background: black;
    padding: 17px 22px;
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
  }
  
  header .content-header .input img:hover {
    background: #2b2b2b;
    cursor: pointer;
  }
  
  header .content-header .info {
    background: white;
    border-radius: 14px;
    margin-top: 20px;
    position: absolute;
    left: 50%;
    z-index: 9999;
  }
  
  header .content-header .info p {
    color: #969696;
    font-size: .7rem;
    font-weight: 500;
    text-transform: uppercase;
    padding-top: 15px;
  }
  
  header .content-header .tags {
    height: 70px;
  }
  
  header .content-header .tags .ip-info span {
    color: black;
    font-size: 1.1rem;
    font-weight: 500;
  }

  header .content-header .tags .ip-info span p{
    color:black;
    font-size: 1.1rem;
    padding-top: 6px;
  }

  .map{
    width: 100%;
    height: 700px;
    z-index: 999;
  }
<head>
    <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css"
    integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A=="
    crossorigin=""/>
    <script src="https://unpkg.com/[email protected]/dist/leaflet.js"
   integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA=="
   crossorigin=""></script>
</head>


<div class="container">
        <header>
            <div class="content-header">
                <h1>IP Address Tracker</h1>
                <div class="input">
                    <input id="ip" type="text" placeholder="Search for any IP address or domain" v-model='query'>
                    <a href="#" class="btnBuscar" ><img src="images/icon-arrow.svg" id="search_btn"></a>
                </div>
                <div class="info" id="info">
                    <div class="ip tags">
                        <p>IP Address</p>
                        <div class="ip-info">
                            <span id="id"></span>
                        </div>
                    </div>

                    <div class="location tags">
                        <p>Location</p>
                        <div class="ip-info">
                            <span id="town"></span>
                        </div>
                    </div>

                    <div class="timezone tags">
                        <p>Timezone</p>
                        <div class="ip-info">
                            <span id="time"></span>
                        </div>
                    </div>

                    <div class="isp tags">
                        <p>ISP</p>
                        <div class="ip-info">
                            <span id="isp"></span>
                        </div>
                    </div>
                </div>
            </div>
        </header>

        <div class="map" id="map"> 

        </div>
    </div>

    <script src="https://unpkg.com/[email protected]/dist/leaflet.js"
  integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA=="
  crossorigin=""></script>
 

Origen Enlace

Mostrar ubicacion

Tengo la siguiente pagina que es para saber la ubicacion mediante la direccion ip, tengo un input donde se ingresa la ip, al dar enter nos muestra unos datos en un div info que son la direccion IP, la ubicacion, la zona horaria y el isp, esos datos me los muestran bien cada que pongo otra ip, en el mapa, al ingresar por primera vez un ip me muestra los datos y su ubicacion en el mapa, pero al poner otra ip, solo me cambia los datos y la ubicacion se queda en el mismo lugar que la anterior, Alguna idea de como al poner otra ip tambien me de su ubicacion en el mapa.

HTML

<head>
    <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css"
    integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A=="
    crossorigin=""/>
    <script src="https://unpkg.com/[email protected]/dist/leaflet.js"
   integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA=="
   crossorigin=""></script>
</head>


<div class="container">
        <header>
            <div class="content-header">
                <h1>IP Address Tracker</h1>
                <div class="input">
                    <input id="ip" type="text" placeholder="Search for any IP address or domain" v-model='query'>
                    <a href="#" class="btnBuscar" ><img src="images/icon-arrow.svg" id="search_btn"></a>
                </div>
                <div class="info" id="info">
                    <div class="ip tags">
                        <p>IP Address</p>
                        <div class="ip-info">
                            <span id="id"></span>
                        </div>
                    </div>

                    <div class="location tags">
                        <p>Location</p>
                        <div class="ip-info">
                            <span id="town"></span>
                        </div>
                    </div>

                    <div class="timezone tags">
                        <p>Timezone</p>
                        <div class="ip-info">
                            <span id="time"></span>
                        </div>
                    </div>

                    <div class="isp tags">
                        <p>ISP</p>
                        <div class="ip-info">
                            <span id="isp"></span>
                        </div>
                    </div>
                </div>
            </div>
        </header>

        <div class="map" id="map"> 

        </div>
    </div>

    <script src="https://unpkg.com/[email protected]/dist/leaflet.js"
  integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA=="
  crossorigin=""></script>

CSS

header {
    background-image: url(../images/pattern-bg.png);
    text-align: center;
    height: 250px;
    background-size: cover;
    background-position: center;
  }
  
  header .content-header {
    width: 90%;
    margin: 0 auto;
    position: relative;
  }
  
  header .content-header h1 {
    color: white;
    font-size: 1.3rem;
    font-weight: 400;
    padding: 20px 0;
  }
  
  header .content-header .input {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
  }
  
  header .content-header .input input {
    width: 90%;
    height: 45px;
    outline: none;
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
    border: none;
    padding: 0 10px;
    font-size: 1rem;
  }
  
  header .content-header .input img {
    background: black;
    padding: 17px 22px;
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
  }
  
  header .content-header .input img:hover {
    background: #2b2b2b;
    cursor: pointer;
  }
  
  header .content-header .info {
    background: white;
    border-radius: 14px;
    margin-top: 20px;
    position: absolute;
    left: 50%;
    z-index: 9999;
  }
  
  header .content-header .info p {
    color: #969696;
    font-size: .7rem;
    font-weight: 500;
    text-transform: uppercase;
    padding-top: 15px;
  }
  
  header .content-header .tags {
    height: 70px;
  }
  
  header .content-header .tags .ip-info span {
    color: black;
    font-size: 1.1rem;
    font-weight: 500;
  }

  header .content-header .tags .ip-info span p{
    color:black;
    font-size: 1.1rem;
    padding-top: 6px;
  }

  .map{
    width: 100%;
    height: 700px;
    z-index: 999;
  }
  

JS

ip.addEventListener('keypress', buscarIp)

function buscarIp(){
    teclaEnter = event.keyCode;
    if(teclaEnter == 13){
        let ipValor = document.querySelector('#ip').value
        let api = `https://geo.ipify.org/api/v1?apiKey=at_qp3qhS3ma9WCYqA4Y7teThm5gQW6p&ipAddress=${ipValor}`

        console.log(ipValor)
        

        fetch(api)
        .then(result => result.json())
        .then(data => {
            let id = document.getElementById('id');
            id.innerHTML = `
                <p>${data.ip}</p>
            `
            let town = document.getElementById('town');
            town.innerHTML = `
                <p>${data.location.city}</p>
            `
            let time = document.getElementById('time');
            time.innerHTML = `
                <p>${data.location.timezone}</p>
            `
            let isp = document.getElementById('isp');
            isp.innerHTML = `
                <p>${data.isp}</p>
            `
            let long = data.location.lat;
            let lat = data.location.lng;
            console.log(long,lat)
            
            console.log(data)

            let map = L.map('map').setView([`${long}`, `${lat}`], 13);
                L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
                attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
            }).addTo(map);

            L.marker([`${long}`, `${lat}`]).addTo(map)
                .openPopup();
        })
        .catch(err => console.log(err))
    }
}