Test

index.html

<meta name="viewport" content="width=device-width, initial-scale=1",shrink-to-fit=no>
<main id="info">
  <div><strong>Connection Data</strong><br><i>by Giannino</i></br></div>
  <div>
    </p>
    <strong>Your Country: </strong>
    <span id="flag"> </span>
    <span id="con">Canada</span>
  </div>
  <div>
    <strong>Your City: </strong>
    <span id="cit">Toronto</span>
  </div>
  <div>
    </p>
    <strong>Data Connections</strong>
    </br><span id="isp"> </span>
    </br>IP: <span id="ip"> </span>
    <p></p>
    <p></p>
  </div>
  
  <div id="overlay"></div>
<div id="map"><p></p></div>
</main>

script.js

$.getJSON("https://extreme-ip-lookup.com/json/", function(data){
          var country = data.country;
          var region = data.region;
          var city = data.city;
          var continent = data.continent;
          var ip = data.query;
          var isp = data.isp;
          var ipType = data.ipType;
          var code = "flag-icon flag-icon-"+data.countryCode.toLowerCase();
          var lat = data.lat;
          var lon = data.lon;
  
          $('#con').text(country);
          $('#cit').text(city);
          $('#ip').text(ip);
          $('#isp').text(isp);
          $('#flag').addClass(code);
  
          var yourPosition = new google.maps.LatLng(lat, lon);
          var mapOptions = {
            zoom: 10,
            center: yourPosition,
            gestureHandling: 'none',
            zoomControl: false,
            disableDefaultUI: true,
            styles: [{"stylers":[
                       {"hue":"#ff1a00"},
                       {"invert_lightness": true},
                       {"saturation":-100},
                       {"lightness":5},
                       {"gamma":5}
                       ]
                     }
                    ]
          }
          
          var map = new google.maps.Map(document.getElementById("map"), mapOptions);

});

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDbu0S-JhiwMZOOZlSRNZGYpFOAskEvmyM"></script>

style.css

@import url('https://fonts.googleapis.com/css?family=Roboto');

body{
  width: 100%;
  font-family: Roboto, sans-serif;
  margin: 0;
  background-color: black;
  color: white;
  overflow-y: hidden;
}

#info {
  text-align: center;
  margin-top: 75px; 
}

#map{
  width: 100%;
  height: 300px;
  position: absolute;
  top: 45%;
}

#overlay{
  width: 100%;
  height: 310px;
  top: 45%;
  position: absolute;
  left: 0;
  z-index: 3;
  background: linear-gradient(black, rgba(0,0,0,0) 50%, black);
}

styles

<link href="https://cdnjs.cloudflare.com/ajax/libs/flag-icon-css/3.3.0/css/flag-icon.min.css" rel="stylesheet" />

test.markdown

Test

A Pen by Giovanni on CodePen.

License.