JSFiddle - React, Tailwind, and code Playground

by apasaja

HTML

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&key=AIzaSyBK-ck0VLNOeB9l2PS90a5IQtSZnCj8nzE"></script>
<ul id="x">
    <li>City: <span id="city"></span></li>
    <li>City alt: <span id="cityAlt"></span></li>
    <li>Country Name: <span id="country"></span></li>
    <li>Country Code: <span id="countryCode"></span></li>
</ul>

JavaScript

var latlng;
latlng = new google.maps.LatLng(3.1502991, 101.6647551); // New York, US
//latlng = new google.maps.LatLng(37.990849233935194, 23.738339349999933); // Athens, GR
//latlng = new google.maps.LatLng(48.8567, 2.3508); // Paris, FR
//latlng = new google.maps.LatLng(47.98247572667902, -102.49018710000001); // New Town, US
//latlng = new google.maps.LatLng(35.44448406385493, 50.99001635390618); // Parand, Tehran, IR
//latlng = new google.maps.LatLng(34.66431108560504, 50.89113940078118); // Saveh, Markazi, IR

new google.maps.Geocoder().geocode({'latLng' : latlng}, function(results, status) {
    if (status == google.maps.GeocoderStatus.OK) {
        if (results[1]) {
            var country = null, countryCode = null, city = null, cityAlt = null;
            var c, lc, component;
            for (var r = 0, rl = results.length; r < rl; r += 1) {
                var result = results[r];

                if (!city && result.types[0] === 'political') {
                    for (c = 0, lc = result.address_components.length; c < lc; c += 1) {
                        component = result.address_components[c];

                        if (component.types[0] === 'political') {
                            city = component.short_name;
                            break;
                        }
                    }
                }
                else if (!city && !cityAlt && result.types[0] === 'locality') {
                    for (c = 0, lc = result.address_components.length; c < lc; c += 1) {
                        component = result.address_components[c];

                        if (component.types[0] === 'locality') {
                            cityAlt = component.long_name;
                            break;
                        }
                    }
                } else if (!country && result.types[0] === 'country') {
                    country = result.address_components[0].long_name;
                    countryCode =...