I'm having a problem using the Geolocation feature where I'm trying to fetch the location data (latitude and longitude) from the url or ip that I type in the ip / url field.
By clicking on the "Locate" button, it only returns the ip / url location data correctly in the table, whereas on the map it only returns the location of the user. My problem is to return the ip / url location data correctly in both the table and the map and when I click the "Locate" button with the "IP / URL" field it should return the user's current location.
geolocation.js
function updateLocationDetails(data) {
var now = new Date();
$('#location_as').html(data.as);
$('#location_city').html(data.city);
$('#location_country').html(data.country);
$('#location_countryCode').html(data.countryCode);
$('#location_isp').html(data.isp);
$('#location_lat').html(data.lat);
$('#location_lon').html(data.lon);
$('#location_org').html(data.org);
$('#location_query').html(data.query);
$('#location_region').html(data.region);
$('#location_regionName').html(data.regionName);
$('#location_status').html(data.status);
$('#location_timezone').html(data.timezone);
$('#location_zip').html(data.zip);
$('table').removeClass("empty");
$('#mapHolder').show();
$('.help').click(function(e) {
var fieldName = $(e.currentTarget).closest('tr').find('.field_name').text();
alert('This is your ' + fieldName + ' from ISP ' + data.isp + ' at ' + now);
});
}
function resetLocationDetails() {
updateLocationDetails({
as: '',
city: '',
country: '',
countryCode: '',
isp: '',
lat: '',
lon: '',
org: '',
query: '0.0.0.0',
region: '',
regionName: '',
status: '',
timezone: '',
zip: ''
});
$('.query').val('');
$('table').addClass('empty');
$('#mapHolder').hide();
}
function initializePage() {
window.indexTemplate = $('#index').html();
window.locationTemplate = $('#locationInfo').html();
window.indexTemplate = Handlebars.compile(window.indexTemplate);
window.locationTemplate = Handlebars.compile(window.locationTemplate);
$('#mainContent').html(window.indexTemplate());
$('#geoLocationContainer').html(window.locationTemplate({
as: '',
city: '',
country: '',
countryCode: '',
isp: '',
lat: '',
lon: '',
org: '',
query: '0.0.0.0',
region: '',
regionName: '',
status: '',
timezone: '',
zip: ''
}));
}
$(function() {
$('.btnLocate').on('click', function() {
$.ajax({
type: 'GET',
url: 'http://ip-api.com/json/',
success: function(response) {
updateLocationDetails(response);
}
});
var output = document.getElementById('mapHolder');
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(success, error);
} else {
output.innerHTML = '<p>Geolocation is not supported by your browser</p>';
return;
}
function success(position) {
lat = position.coords.latitude;
lon = position.coords.longitude;
latlon = new google.maps.LatLng(lat, lon);
mapholder = document.getElementById('mapHolder');
mapholder.style.height = '340px';
mapholder.style.width = '100%';
var myOptions = {
center: latlon,
zoom: 15,
mapTypeId: google.maps.MapTypeId.ROADMAP,
mapTypeControl: false,
scrollwheel: false,
navigationControlOptions: {
style: google.maps.NavigationControlStyle.SMALL
}
}
var map = new google.maps.Map(document.getElementById('mapHolder'), myOptions),
marker = new google.maps.Marker({
position: latlon,
map: map,
title: 'You are here!'
});
}
function error(error) {
switch (error.code) {
case error.PERMISSION_DENIED:
output.innerHTML = 'User denied the request for Geolocation.'
break;
case error.POSITION_UNAVAILABLE:
output.innerHTML = 'Location information is unavailable.'
break;
case error.TIMEOUT:
output.innerHTML = 'The request to get user location timed out.'
break;
case error.UNKNOWN_ERROR:
output.innerHTML = 'An unknown error occurred.'
break;
}
}
output.innerHTML = '<p>Locating…</p>';
navigator.geolocation.getCurrentPosition(success, error);
$.getJSON('http://ip-api.com/json/' + $('.query').val(), function(data) {
var now = new Date();
$('#location_as').html(data.as);
$('#location_city').html(data.city);
$('#location_country').html(data.country);
$('#location_countryCode').html(data.countryCode);
$('#location_isp').html(data.isp);
$('#location_lat').html(data.lat);
$('#location_lon').html(data.lon);
$('#location_org').html(data.org);
$('#location_query').html(data.query);
$('#location_region').html(data.region);
$('#location_regionName').html(data.regionName);
$('#location_status').html(data.status);
$('#location_timezone').html(data.timezone);
$('#location_zip').html(data.zip);
$('table').removeClass("empty");
$('.help').click(function(e) {
var fieldName = $(e.currentTarget).closest('tr').find('.field_name').text();
alert('This is your ' + fieldName + ' from ISP ' + data.isp + ' at ' + now);
});
$('.query').each(function() {
if ($(this).val() == '') {
$(this).val(data.query);
}
});
});
});
initializePage();
});
index.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
<link rel="stylesheet" type="text/css" href="vendor/font-awesome/styles/css/font-awesome.css" />
<link rel="stylesheet" type="text/css" href="vendor/spirit-framework/styles/css/main.css" />
<link rel="stylesheet" type="text/css" href="css/geolocation.css" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><scripttype="text/javascript" src="vendor/spirit-framework/js/core.js"></script>
<script type="text/javascript" src="js/libs/handlebars-v1.3.0.js"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script><scripttype="text/javascript" src="js/geolocation.js"></script>
<title></title>
</head>
<body class="container">
<div class="demo">
<h1 id="title">GeoLocation Test</h1>
<hr class="divider"></hr>
<div class="content">
<div class="urlSearchBox">
<form name="urlSearchForm" action="#" method="GET" class="demo-form-v margin-bottom-x20" onsubmit="return false">
<fieldset>
<legend>
<label for="query" class="demo-lb-text"><span>Query IP / domain</span></label>
</legend>
<div class="demo-tf-skin col-l0 box-asd no-margin-right">
<input type="text" name="query" id="query" class="query" />
</div>
<span class="box-asd col-xl no-margin-bottom no-margin-right">
<button class="demo-btn-skin demo-btn-form demo-btn-submit btnLocate">Locate</button>
</span>
<span class="box-asd col-xl no-margin-bottom no-margin-right">
<button class="demo-btn-skin demo-btn-form demo-btn-default btnResetLocation" onclick="resetLocationDetails()">Reset location</button>
</span>
</fieldset>
</form>
</div>
<section id="mainContent">
</section>
<script type="text/x-handlebars" id="index">
<section id="geoLocationContainer" class="">
</section>
<div id="mapContainer">
<div id="mapHolder">
</div>
</div>
</script>
<script type="text/x-handlebars" id="locationInfo">
<h5 class="margin-bottom-x10">Estimated location</h5>
<div class="table-container margin-bottom-x20">
<table class="table-stripe empty">
<tbody>
<tr>
<td class="field_name">As</td>
<td id="location_as" class="location_value">{{as}}</td>
<td><button class="help demo-btn-skin demo-btn-info"><span class="fa fa-info"></span></button></td>
</tr>
<tr>
<td class="field_name">City</td>
<td id="location_city" class="location_value">{{city}}</td>
<td><button class="help demo-btn-skin demo-btn-info"><span class="fa fa-info"></span></button></td>
</tr>
<tr>
<td class="field_name">Country</td>
<td id="location_country" class="location_value">{{country}}</td>
<td><button class="help demo-btn-skin demo-btn-info"><span class="fa fa-info"></span></button></td>
</tr>
<tr>
<td class="field_name">Country Code</td>
<td id="location_countryCode" class="location_value">{{countryCode}}</td>
<td><button class="help demo-btn-skin demo-btn-info"><span class="fa fa-info"></span></button></td>
</tr>
<tr>
<td class="field_name">ISP</td>
<td id="location_isp" class="location_value">{{isp}}</td>
<td><button class="help demo-btn-skin demo-btn-info"><span class="fa fa-info"></span></button></td>
</tr>
<tr>
<td class="field_name">Latitude</td>
<td id="location_lat" class="location_value">{{lat}}</td>
<td><button class="help demo-btn-skin demo-btn-info"><span class="fa fa-info"></span></button></td>
</tr>
<tr>
<td class="field_name">Longitude</td>
<td id="location_lon" class="location_value">{{lon}}</td>
<td><button class="help demo-btn-skin demo-btn-info"><span class="fa fa-info"></span></button></td>
</tr>
<tr>
<td class="field_name">Org</td>
<td id="location_org" class="location_value">{{org}}</td>
<td><button class="help demo-btn-skin demo-btn-info"><span class="fa fa-info"></span></button></td>
</tr>
<tr>
<td class="field_name">IP</td>
<td id="location_query" class="location_value">{{query}}</td>
<td><button class="help demo-btn-skin demo-btn-info"><span class="fa fa-info"></span></button></td>
</tr>
<tr>
<td class="field_name">Region</td>
<td id="location_region" class="location_value">{{region}}</td>
<td><button class="help demo-btn-skin demo-btn-info"><span class="fa fa-info"></span></button></td>
</tr>
<tr>
<td class="field_name">Region Name</td>
<td id="location_regionName" class="location_value">{{regionName}}</td>
<td><button class="help demo-btn-skin demo-btn-info"><span class="fa fa-info"></span></button></td>
</tr>
<tr>
<td class="field_name">Status</td>
<td id="location_status" class="location_value">{{status}}</td>
<td><button class="help demo-btn-skin demo-btn-info"><span class="fa fa-info"></span></button></td>
</tr>
<tr>
<td class="field_name">Time Zone</td>
<td id="location_timezone" class="location_value">{{timezone}}</td>
<td><button class="help demo-btn-skin demo-btn-info"><span class="fa fa-info"></span></button></td>
</tr>
<tr>
<td class="field_name">Zip Code</td>
<td id="location_zip" class="location_value">{{zip}}</td>
<td><button class="help demo-btn-skin demo-btn-info"><span class="fa fa-info"></span></button></td>
</tr>
</tbody>
</table>
</div>
</script>
</div>
</div>
</body>
</html>