get user location (street, city and country) in input field

get user location (street, city and country) in input field

I am very knew to jquery.
I have the following code

  1. <%@page contentType="text/html" pageEncoding="UTF-8"%>
  2. <!DOCTYPE html>
  3. <html>
  4.     <head>
  5.         <title>New Road</title>
  6.         <meta charset="UTF-8">
  7.         <link rel="shortcut icon" href ="images/congestion-fico.jpg" type="image/gif">
  8.         <meta name = "viewport" content="width=device-width, initial-scale=1.0">
  9.         <link href="jquery.mobile-1.4.5/jquery.mobile-1.4.5.min.css" rel="stylesheet" type="text/css"/>
  10.         <script src="jquery.mobile-1.4.5/jquery-1.11.3.min.js" type="text/javascript"></script>
  11.         <script src="jquery.mobile-1.4.5/jquery.mobile-1.4.5.js" type="text/javascript"></script>
  12.     </head>
  13.     <body>
  14.         <div data-role="page" data-theme="b">
  15.             <div data-role="header" >
  16.                 <a href="#" data-icon="back" data-rel="back">back</a>
  17.                 <h1> New Road </h1>
  18.             </div>
  19.             <div role="main" class="ui-content">
  20.                 <form id = "newRoad" name = "newroadform" method = "post" action = "newRoadServlet">
  21.                     <input type="text" name="road" id="road" placeholder="road" required/> 
  22.                     <input type="text" name="city" id="city" placeholder="city" required/> 
  23.                     <input type="text" name="country" id="country" placeholder="country" required/> 
  24.                     <label for="congestioncause">congestion cause</label>
  25.                         <select id="congestioncause" name="congestioncause" >
  26.                            <option value="high demand">high demand</option>
  27.                            <option value="accident">accident</option>
  28.                            <option value="road works">road works</option>
  29.                            <option value="poor timing">poor timing</option>
  30.                            <option value="weather">weather</option>
  31.                            <option value="events">events</option>
  32.                         </select>
  33.                         <label for="congestion">Extra minutes to spend:</label>
  34.                         <input type="range" name="congestionlevel" id="congestion" value="50" min="10" max="100" data-highlight="true"/><br>
  35.                         <div style="text-align: center">
  36.                             <input type="submit" data-inline="true" name="submit" id="submit" value="Submit" data-icon="check"/>
  37.                             <input type="reset" data-inline="true" value="Reset" data-icon="delete"/>
  38.                         </div>
  39.                 </form> 
  40.             </div>
  41.         </div>
  42.     </body>
  43. </html>

How would I go about filling the road, city and country fields automatically when the user visits that site all data based on there IP address.
I ran google searches but I could not even find a tutorial showing how this can be achieved.

when the visitor navigates to this page, with their GPS set on, how would the fields be pre-filed with their current location?

this is a jsp page.

Am not sure how it work but i found this piece of code at http://jsfiddle.net/rBL3D/9/ that gives me back an alert of my city
  1. $.get("http://ipinfo.io", function(response) {
  2.      alert(response.city);
  3. }, "jsonp");
How can I for instance get the city displayed in the city field when the page loads