批次查詢地址經緯度

HTML

<h1>批次查詢地址經緯度</h1>
<hr/>
<div class="first">
  <p>Google API 有限制每日查詢次數，若已超過當日限制，請自行修改下方API KEY</p>
  API KEY: <input type="text" placeholder="API KEY" value="AIzaSyDcyMmOXzS4zBjfkAtkGdp0rjWBoj3Wsss">
  <input type="button" value="開始使用">
</div>
<form class="second" action="#" method="post">
  <label class="block">請輸入地址，每個地址一行:</label>
  <textarea type="text" rows="10" cols="60" name="address"></textarea>
  <div>
    <input type="submit" value="Go!" class="submit" />
    <input type="reset" value="Reset" class="" />
  </div>
</form>
<div class="result">
  <div class="progress"><span class="current"></span> / <span class="total"></span> (<span class="percent"></span>%)</div>
  <table class="list">
    <thead>
      <tr>
        <th>地址</th>
        <th>Lat</th>
        <th>Lng</th>
        <th>Result</th>
      </tr>
    </thead>
    <tbody></tbody>
  </table>
  <div class="progress"></div>
  <div class="progress"><span class="current"></span> / <span class="total"></span> (<span class="percent"></span>%)</div>
</div>

CSS

body,
        html,
        form,
        div {
          margin: 0;
          padding: 0;
          border: 0
        }
h1 { font-size:large; }        
        body {
          font-family: Arial;
          border: 0 none;
          padding: 5px 20px;
        }
        
        .progress {
          margin: 10px
        }
        .list {width:100%; }
        .result {
          display: none;
        }
        
        input,
        textarea {
          padding: 5px
        }
        
        label.block {
          display: block
        }
        
        .submit {
          width: 300px;
          margin: 10px
        }
        
        .second {
          display: none
        }

JavaScript

$('.first').on('click', 'input:button', function(e) {
  var key = $(this).prev().val();
  if (!key) {
    return alert('請提供 API KEY');
  }

  $(e.delegetTarget).text('loading...');

  var url = 'https://maps.googleapis.com/maps/api/js?callback=initMap&key=' + encodeURIComponent(key);
  $('<scr' + 'ipt/>').attr('src', url).prependTo('body');
});


window.initMap = function() {
  $('.first, .second').toggle('slow');
  var geocoder = new google.maps.Geocoder()
  $('form').find('input:reset').click(function() {
      $('table.list tbody').empty();
      $('.result').hide();
    })
    .end().submit(function(e) {
      e.preventDefault();
      var txt = $('textarea', this);
      var input = $('input', this);
      if (txt.val() == '') return !1;
      var addrs = txt.val().split('\n');
      if (geocoder && addrs.length > 0) {
        $('.result').show();
        txt.attr('disabled', !0);
        input.attr('disabled', !0);
        var len = addrs.length;
        $('.total').text(len);
        $('.current,.percent').text(0);
        var retry = 3;
        setTimeout(function() {
          var fn = arguments.callee;
          if (addrs.length == 0) {
            input.attr('disabled', !1);
            txt.attr('disabled', !1).val('');
            return;
          }
          var address = addrs.shift(0);

          function callback(results, status) {
            $('.current').text(len - addrs.length);
            $('.percent').text(Math.floor((len - addrs.length) / len * 10000) / 100);
            var skip = typeof results == typeof(1);
            if (!skip) {
              if (status == google.maps.GeocoderStatus.OK) {
                retry = 3;
                console.log(results);
                var point = results[0].geometry.location;
                $('table.list tbody').append(
                  ["<tr><td>", address, "</td><td>", point.lat(), "</td><td>", point.lng(), "</td><td>成功</td></tr>"].join('')
                );
              } else {
             ...