<main id="info">
		<p><strong></strong>
			<span id="flag" class=""></span>
			<span id="con"></span>
		</p>
		<p><strong>Your City</strong> <span id="cit"></span></p>
		<p><strong>Your IP</strong> <span id="ip"></span></p>
	</main>
<div id="map"></div>

body {
  font-family: sans-serif;
  margin: 0;
}

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

#map {
	width: 90%;
	height: 50vw;
	margin: auto;
}

$.getJSON('https://freegeoip.app/json/', function(data) {
	var country = data.country_name;
	var city = data.city;
	var ip = data.ip;
	var cc = "flag-icon flag-icon-"+data.country_code.toLowerCase();
	var yourLat = data.latitude;
	var yourLon = data.longitude;
	$('#con').text(country);
	$('#cit').text(city);
	$('#ip').text(ip);
	$('#flag').addClass(cc);

	var yourPosition = new google.maps.LatLng(yourLat, yourLon);

	var mapOptions = {
		zoom: 10,
		center: yourPosition
	}

	var map = new google.maps.Map(document.getElementById('map'), mapOptions);
	var mapId = document.getElementById("map").removeAttribute("style")


});