Final correct one

by Yukai Lin

HTML

<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCAXcmA4VjhBe5vJIhtX8WijbSENgA_OBE"></script>
<body>Change excel table to HTML: http://tableizer.journalistopia.com/tableizer.php
    <br>
    <br>
    <input id="btn" type="button" value="Get coordinates now!" />
    <table class="tableizer-table" id="datatable">
        <tr class="tableizer-firstrow">
            <th>City</th>
            <th>Country</th>
            <th>City Lat</th>
            <th>City Lon</th>
        </tr>
        <tr>
            <td>Suwon</td>
            <td>Korea</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
        </tr>
        <tr>
            <td>New Delhi</td>
            <td>India</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
        </tr>
        <tr>
            <td>Guangzhou</td>
            <td>China</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
        </tr>
        <tr>
            <td>Bengaluru</td>
            <td>India</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
        </tr>
        <tr>
            <td>Yancheng</td>
            <td>China</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
        </tr>
        <tr>
            <td>Dalian</td>
            <td>China</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
        </tr>
        <tr>
            <td>Ahmedabad</td>
            <td>India</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
        </tr>
        <tr>
            <td>Chandigarh</td>
            <td>India</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
        </tr>
        <tr>
            <td>Zhengzhou</td>
            <td>China</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
        </tr>
        <tr>
            <td>Coimbatore</td>
            <td>India</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
        </tr>
        <tr>
            <td>Yantai</td>
            <td>China</td>
            <td>&nbsp;</td>
 ...

CSS

table.tableizer-table {
	    border: 1px solid #CCC;
	    font-family: Arial, Helvetica, sans-serif;
	    font-size: 12px;
	}
	.tableizer-table td {
	    padding: 4px;
	    margin: 3px;
	    border: 1px solid #ccc;
	}
	.tableizer-table th {
	    background-color: #104E8B;
	    color: #FFF;
	    font-weight: bold;
	}

JavaScript

var count = $("#datatable tr").length;



$("#btn").click(function () {
    var geocoder = new google.maps.Geocoder();
    var finaltable = document.getElementById("datatable");

    alert("Row count: " + count);

    var i;

    for (i = 1; i < 20; i++) {


        var fullAddress = finaltable.rows[i].cells[0].innerHTML + ", " + finaltable.rows[i].cells[1].innerHTML;

        getLatLong(fullAddress, i);


    }

    function getLatLong(addr, llrow) {

        var latCell = finaltable.rows[llrow].cells[2];
        var lonCell = finaltable.rows[llrow].cells[3];

        geocoder.geocode({
            'address': addr
        }, function (results, status) {
            if (status == google.maps.GeocoderStatus.OK) {

                latCell.innerHTML = String(results[0].geometry.location.lat());
                lonCell.innerHTML = String(results[0].geometry.location.lng());

            } else if (status == google.maps.GeocoderStatus.OVER_QUERY_LIMIT) {
                latCell.innerHTML = "OVER";
                lonCell.innerHTML = "OVER";

            } else {
                alert("Something got wrong " + status);
                latCell.innerHTML = "ERR";
                lonCell.innerHTML = "ERR";
            }
        });
    }

});