JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<p>Страна: <span id="country"></span></p>
<p>Край(обл.): <span id="state"></span></p>
<p>Город: <span id="city"></span></p>
<p>Адрес: <span id="address"></span></p>
<p>Широта: <span id="latitude"></span></p>
<p>Долгота: <span id="longitude"></span></p>

JavaScript

function displayError(error) {
  var errors = {
    1: 'Нет прав доступа',
    2: 'Местоположение невозможно определить',
    3: 'Таймаут соединения'
  };
  alert("Ошибка: " + errors[error.code]);
}

function displayPosition(position) {
  var GEOCODING = 'https://maps.googleapis.com/maps/api/geocode/json?latlng=' + position.coords.latitude + '%2C' + position.coords.longitude + '&language=ru';

  $.getJSON(GEOCODING).done(function(location) {

    $('#address').html(location.results[0].formatted_address);
    $('#latitude').html(position.coords.latitude);
    $('#longitude').html(position.coords.longitude);

    for (var i = 0; i < location.results[0].address_components.length; i++) {
       switch(location.results[0].address_components[i].types[0]) {
         case 'locality':
           $('#city').html(location.results[0].address_components[i].long_name);
           break;
         case 'administrative_area_level_1':
           $('#state').html(location.results[0].address_components[i].long_name);
           break;
         case 'country':
           $('#country').html(location.results[0].address_components[i].long_name);
           break;
       }
    }
  })
}

if (navigator.geolocation) {
  var timeoutVal = 10 * 1000 * 1000;
  navigator.geolocation.getCurrentPosition(
    displayPosition,
    displayError, {
      enableHighAccuracy: true,
      timeout: timeoutVal,
      maximumAge: 0
    }
  );
} else {
  alert("Geolocation не поддерживается данным браузером");
}