なんじゃくにっき

プログラミングの話題中心。

JavaScriptでSleep関数の代わり(3)　Google Map編

昨日、一昨日とJavaScriptでウェイトをかけるといったことをしたが、
やりたかったのは以下のこと。
Google Map APIのGeocoding APIを使って住所一覧を緯度、経度一覧に変換したいが、
Geocoding APIは短期間に連続して叩くとエラーになるのでループにウェイトをかけたかった。

左のテキストエリアに住所を入力してボタンを押すと、
右のテキストエリアに住所、取得した緯度、経度を表示するといったプログラム。

以下がそのコード。

<html>

<head>

<title>hoge</title>

<!-- Google Map のKeyは自分のものに置き換えて試して下さい -->

<script type="text/javascript" charset="utf-8" 

        src="http://maps.google.com/maps?file=api&v=2&key=XXXXXX">

</script>

<script type="text/javascript">

//<![CDATA[

var buf,code,gcoder,i;

window.onload = onLoad;
function onLoad(){

  gcoder = new GClientGeocoder();

}
function onButtonClick(){

  buf="";

  i=0;

  switch(document.form.combobox.selectedIndex){

  case 0:code=String.fromCharCode(13)+String.fromCharCode(10);break;

  case 1:code=String.fromCharCode(13);break;

  case 2:code=String.fromCharCode(10);break;}

  arr=document.form.textarea1.value.split(code);

  if(arr.length>10){alert("行数は10行までにしてください");return;}

  Convert(arr[i]);

}
function Convert(address){

  if(address==""||(!gcoder)){

    buf+=code;

  }else{

    gcoder.getLatLng(address,function(point){buf+=address+","+(point?point.lat():"")+","+(point?point.lng():"")+code;});  }

  document.form.textarea2.value=buf;

  if(i++<arr.length)

    setTimeout("Convert('"+arr[i]+"')",500);

}
//]]>

</script>

</head>

<body>

<form name="form">

  <table>

  <tr><td>改行コード

  <select name="combobox" size="1">

    <option selected="selected">CRLF</option>

    <option >CR</option>

    <option >LF</option>

    </select>

  <td></tr>  

  <tr><td><textarea name="textarea1" rows="10" cols="50"></textarea></td>

      <td>⇒</td>

      <td><textarea name="textarea2" rows="10" cols="50"></textarea></td></tr>

  <tr><td colspan=3><input type="button" value="変換" onClick="onButtonClick()"></td></tr>

  </table>

</form>

</body>

</html>