Google Earth API を利用して、Driving Simulatorを試す。

posted by shira on 2010.04.17, under blog, Googole API, HTML, JavaScript, PHP, 技術TIPS

04/17

Google Map APIを調べていたら、gmap2を通り過ぎてgmap3までいっているではないですか！

少し注意力がゆるむと情報から取り残されることに不安になります。

さらによく見てみると、Google Earth API までもがリリースされていることに気がつく。以下覚え書き。

（作動には初回はプラグインのダウンロードが必要です。）

（使用したJavascriptライブラリ）

（使用したGoogle APIライブラリ）

<script type="text/javascript" src="http://www.google.com/jsapi?hl=en&key=ABQIAAAAfX-HRoBvGpvoySrUwnOHcBTUkZcFtEOurKgmOCOt0dxaULL03hTqo7fhMMlwEDWOvnLnz-OAF5oVkg">
</script>

（HTML部分）

<table style="width: 100%;">
<tr>
  <td valign="top">
    <table>
      <tr>
        <td style="width: 100%" valign="top">
          <form id="directions-form" onsubmit="return false;" action="post">
            <fieldset>
              <legend>Directions</legend>
              From:
              <input type="text" id="from" value="東京都新宿区新宿御苑前" size="30"/>
              To:
              <input type="text" id="to" value="東京都渋谷区恵比寿三丁目" size="30"/>
              <input type="submit" onclick="DS_goDirections();" id="go" value="区間セット"/>
            </fieldset>
          </form>
        </td>
      </tr>
      <tr>
        <td style="width: 100%" valign="top">
          <form id="simulator-form" onsubmit="return false;" action="get">
            <fieldset>
              <legend>Simulator</legend>
              <input type="button" onclick="DS_controlSimulator('start');" value="スタート"/>
              <input type="button" onclick="DS_controlSimulator('pause');" value="　停止　"/>
              Speed: <strong><span id="speed-indicator">1x</span></strong>
              <input type="button" onclick="DS_controlSimulator('slower');" value=" － "/>
              <input type="button" onclick="DS_controlSimulator('faster');" value=" ＋ "/>
            </fieldset>
          </form>
        </td>
      </tr>
    </table>
  </td>
</tr>
</table>
<table style="width: 100%; height: 400px;">
<tr>
  <td style="width: 67%" valign="top">
    <div id="earth" style="border: 1px solid #000; height: 400px;">
    <div id="status"></div>
  </td>
  <td style="width: 33%" valign="top">
    <div id="map" style="border: 1px solid #000; height: 400px;"></div>
  </td>
</tr>
</table>
<div id="route-details"></div>
<hr />

（注意点）

■比較的処理が重いので、メモリーリークを回避させるために、ページを離れる時の「onunload」イベント処理を「body」タグに追加してメモリの開放を行う。