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: '© <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>