Untitled

<!DOCTYPE html>
<html>
  <head>
    <title>Simple Map</title>
    <meta name="viewport" content="initial-scale=1.0">
        <meta charset="utf-8">
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
        <link rel="stylesheet" type="text/css" href="style.css">
<style>      /* Always set the map height explicitly to define the size of the div
       * element that contains the map. */
      #map {
        height: 100%;
      }
      /* Optional: Makes the sample page fill the window. */
      html, body {
        height: 100%
      }</style>
  </head>
  <body>
    <div class="container navanimation">
Home        <a href="current.html">Current</a>
        <a href="track.html">Track</a>
        <a>ABOUT</a>
        <a>CONTACT</a>
      </div>

                <div style="padding-left:16px">
                    <p id="showIp"></p>
                    <p id="showCity"></p>
                    <p id="showCountry"></p>
                    <p id="showIsp"></p>
                </div>
                <input name="box" type="text" placeholder="Put in IP here" id="box" class="searchField"/>
                <button type="button" class="btn btn-primary btn-sm" onclick="checkInfo()">Run!</button>

      <div id="map"></div>
    <script>
      var map;
      function initMap() {
        map = new google.maps.Map(document.getElementById('map'), {
          center: {lat: -34.397, lng: 150.644},
          zoom: 8
        });
      }
    </script>
    <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap"
    async defer></script>


    <script>
function addtoIp(add)
{
var ipnmbrs = "";
for(i = 0; i < add.length; i++)
{
    if(add[i] != ".")
    {
        if(!isNaN(add[i])) ipnmbrs += add[i];
        else {
            alert("no letters");
            break;
        }
    }
    else if(add[i] == ".") ipnmbrs += ".";
}
 return "http://extreme-ip-lookup.com/json/" + ipnmbrs;
}


 function checkInfo()
 {
    var ipInfo = document.getElementById("box").value;
        $.getJSON(addtoIp(ipInfo), function(data) {
                    console.log(JSON.stringify(data, null, 2));
                    var info = JSON.parse(JSON.stringify(data, null, 2));
                    var ip = info.query;
                    var city = info.city;
                    var country = info.country;
                    var isp = info.isp;
                    var business = info.business


                    document.getElementById("showIp").innerHTML = ip;
                    document.getElementById("showCity").innerHTML = city;
                    document.getElementById("showCountry").innerHTML = country;
                    document.getElementById("showIsp").innerHTML = isp;
                });
            }
                    </script>
                    <script>
                        require('./renderer.js');
                    </script>
  </body>
</html>