show my ip location
<style>
#visitor_ip{
color:cyan;
}
#my_map {
height: 400px;
width: 100%;
}
.show_visitor{
display:block;
height:20px;
width:150px;
cursor:pointer;
background-color:green;
border-style: dotted;
border-color:red;
border-width:1px;
border-radius: 5px;
box-shadow: 0 3px #999;
}
.show_visitor:active{
box-shadow: 0 5px #666;
transform: translateY(2px);
}
</style>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyA3vsA_vWUSgzSc8e5vzfmLEqdYwuL86Qg&callback=initMap">
</script>
</head>
<br />
<div class="show_visitor" onclick="show_visitor_address()">show my ip location</div>
<div id="my_map"></div>
<div id="visitor_ip">
</div>
<script>
function show_visitor_address(){
$.getJSON('https://ipapi.co/json/', function(data) {
$("#visitor_ip").html(JSON.stringify(data, null, 2).replace(/,/g,",</br>"));
var my_center = {lat:data.latitude,lng:data.longitude};
var map = new google.maps.Map(document.getElementById('my_map'), {
zoom: 4,
center: my_center
});
var marker = new google.maps.Marker({
position: my_center,
map: map,
title: data.city
});
});
}
</script>
reference:
https://www.maxmind.com/en/home
https://stackoverflow.com/questions/391979/how-to-get-clients-ip-address-using-javascript-only
https://developers.google.com/maps/documentation/javascript/adding-a-google-map
No comments:
Post a Comment