Skip to main content
1 de 2

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))
    }
}