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: '© <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: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);
L.marker([`${long}`, `${lat}`]).addTo(map)
.openPopup();
})
.catch(err => console.log(err))
}
}