Searching IP or URL of a website using Geolocation

Question

I’m having a problem using the Geolocation feature where I’m trying to fetch the location data (latitude and longitude) of the url or ip I type in the ip/url field.

By clicking the "Locate" button, it only returns the location data of the ip/url correctly in the table, while in the map it only returns the location of the user. My difficulty is to return the location data of the ip/url correctly both in the table and on the map and when I click on the "Locate" button with the field "IP/URL" then it should return the current location of the user.

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>
    <script type="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>
    <script type="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>

Answer 1

It seems that you are not providing the IP/Name you want to get the location:

...
$.ajax({
  type: 'GET',
  url: 'http://ip-api.com/json/',
...

I imagine it should be that way:

var host = 'www.google.com'
... 
$.ajax({
  type: 'GET',
  url: 'http://ip-api.com/json/' + host,
...

It is just an example, because I did not identify in the code which field contains the URL/Name. Just you adapt it.