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

posted by on 2010.04.17, under blog, Googole API, HTML, JavaScript, PHP, 技術TIPS  
このエントリをはてなブックマークに追加このエントリをLivedoor Clipに追加このエントリをYahoo!ブックマークに追加このエントリをFC2ブックマークに追加このエントリをNifty Clipに追加このエントリをPOOKMARK. Airlinesに追加このエントリをBuzzurl(バザール)に追加このエントリをChoixに追加このエントリをnewsingに追加
04/17

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

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

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

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

Directions From: To:
Simulator Speed: 1x

 

(使用した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」タグに追加してメモリの開放を行う。

<body onunload="GUnload();">

■Javascriptのライブラリ「geplugin-helpers.js」に、「p1」「p2」というありふれた変数が使われていたため、他の関数とバッティングしてしまった。

重複しないような名称に変更して使用することで回避する。

ちなみに修正前の状態でIEではエラーになって動作しないが、Firefoxでは無視して最後まで処理されるという違いあり。

jQueryのメニューlavaLampを使ってみる。

posted by on 2010.04.02, under blog, JavaScript, jQuery, PHP, Wordpress, 技術TIPS  
このエントリをはてなブックマークに追加このエントリをLivedoor Clipに追加このエントリをYahoo!ブックマークに追加このエントリをFC2ブックマークに追加このエントリをNifty Clipに追加このエントリをPOOKMARK. Airlinesに追加このエントリをBuzzurl(バザール)に追加このエントリをChoixに追加このエントリをnewsingに追加
04/02

jQueryライブラリでお馴染みのlavaLampをヘッダー右側に設置。

マウスに付いてくる動きが気持ち良いですね。




 

使用したライブラリ:

jquery-1.3.2.min.js

jquery.easing.min.js

jquery.lavalamp.min.js 

 

参考にしたサイト:

jQueryを利用したFlashみたいなメニュー

LavaLamp for jQuery lovers!

 

注意メモ1:

サンプルソースのJavascriptをそのまま貼ると、リンク先に遷移しなかったため、

clickイベントの戻り「false」(07行目)を「true」に修正して無事OKに。

<script type="text/javascript">// <!&#91;CDATA&#91;
$(function() {
$("#1, #2, #3").lavaLamp({
fx: "backout", 
speed: 700,
click: function(event, menuItem) {
return false; ← true に変更
}
});
});
// &#93;&#93;></script>

 

注意メモ2:

currentページの表示は、liタグのクラスに「current」を追加すればOK。

<ul id="p2" class="lavaLampNoImage">
	<li class="current"><a href="http://e-six.jp/">Home</a></li>
	<li class="page_item"><a href="http://e-six.jp/about/">About</a></li>
	<li class="page_item"><a href="http://e-six.jp/order/">Order</a></li>
	<li class="page_item"><a href="http://e-six.jp/inquiry/">Inquiry</a></li>
	<li class="page_item"><a href="http://e-six.jp/link/">Link</a></li>
	<li class="page_item"><a href="http://e-six.jp/category/blog/">blog</a></li>
</ul>

(追記)

WORDPRESSのテンプレート「header.php」に記述したPHPのソースも記述しておきます。

<ul class="lavaLampNoImage" id="p2">
    <li class="<?php if (!is_page() && is_home()) { ?>current<?php } else { ?>page_item<?php } ?>">
    	<a href="<?php bloginfo('url'); ?>/">Home</a></li>
    <li class="<?php if (is_page('about')) { ?>current<?php } else { ?>page_item<?php } ?>">
    	<a href="<?php bloginfo('url'); ?>/about/">About</a></li>
    <li class="<?php if (is_page('order')) { ?>current<?php } else { ?>page_item<?php } ?>">
    	<a href="<?php bloginfo('url'); ?>/order/">Order</a></li>
    <li class="<?php if (is_page('inquiry')) { ?>current<?php } else { ?>page_item<?php } ?>">
    	<a href="<?php bloginfo('url'); ?>/inquiry/">Inquiry</a></li>
    <li class="<?php if (is_page('link')) { ?>current<?php } else { ?>page_item<?php } ?>">
    	<a href="<?php bloginfo('url'); ?>/link/">Link</a></li>
    <li class="<?php if (is_page() || is_home()) { ?>page_item<?php } else { ?>current<?php } ?>">
    	<a href="<?php bloginfo('url'); ?>/category/blog/">blog</a></li>
</ul>

pagetop

  • seo