道順・ルートの表示   出発 :

到着 :

  走行シミュレーション  


速度 : 1x
発着候補 :

熊本  阿蘇山
調布飛行場  東京ディズニーランド
カンクン,メキシコ  チュトゥマル
リル=ルッス,フランス  カルジェーズ
ティングル,アイルランド  バリーバニオン
ビエヌラ,フランス  バルカッジョ
セント・ヘレンズ,タスマニア  スタンリー
コスタ・パラディーゾ,イタリア  バラーウ
ラック・デ・アークズ,カナダ   グレーシャー国立公園
ドームス・デ・マリーア,イタリア  カルボニア
ポートリー,UK  アラブール
マラスル,スペイン  プエルト・デ・サンティアゴ
ボルトスクーゾ,イタリア  マルフィダノ
ソルソ.イタリア  アリエントゥ
スキバリーン.アイルランド  カアーシビーン
ヴィッラシミーウス.イタリア  オロゼイ
ニナナ.アラスカ  プレザント・バレー
ブリンディジ,イタリア  バーリ
ハナウマ・ベイ,USA  カイルア
テルモリ,イタリア  ペスカーラ
クレイン・モンド,南アフリカ  ゴードンズ・ベイ
ジェーラ,イタリア  シャッカ
オーレスン,ノルウェー  モルデ
ハウゲスン,ノルウェー  ベルゲン
タカテ,メキシコ  メヒカリ
インバーギル,ニュージーランド  グレイマウス
ファインガレイ,ニュージーランド  ファカタニ
ハウェラ,ニュージーランド  ウェリントン
クライストチャーチ,ニュージーランド  ブレナム
オポティキ,ニュージーランド  ネーピア
ボーデーガ・ベイ,USA  Sea Ranch,USA

デモは、〔開始〕と〔発進!〕を押し、〔+〕(加速)・〔-〕(減速)で。 通過点のクリックで、Warp!。 
ルート変更を、発着場所のタイプインで。

 

 

ホーム へ       サンプルページ  Google Earth6  google_earth6.htm

ドライブシミュレーター(3Dロケーション+地図)。      Google Earth API、DHTML。      表示サイズなどのカスタマイズはテキストエディターなどで可。  all 対応、≠IE(64bit)。     コピー、編集し、簡単にWebで応用できまっ、(^ ^)。

デモは、〔開始〕と〔発進!〕を押し、〔+〕(加速)・〔-〕(減速)で。  ルート変更を、発着場所のタイプインで。

 

< ご使用方法 >

 ・ ローカル(=PC)への保存は、driving/をクリック開いたホルダーで、google_earth6.htm、index.css、index.js、simulator.js を右クリック、[対象をファイルに保存] - 【ファイルのダウンロード】、【ファイル名を付けて保存】 - <保存する場所>: ……、などで。    ※:  変わってしまった、ファイル名や、*.html 中のパスは要修正。

 ・ このDHTMLの実装方法は、google_earth6.htm をテキストエディターで開き、ホームページ作成ソフトなどのHTML挿入/編集メニューなどを使って、新しいページ 1 や hogehoge.html(=任意の挿入先ファイル名) の、 <head> 〜 </head> の任意の行間に (*1)を、さらに <body> 〜 </body>の任意の行間に (*2) をペーストします。    ペーストするコードとキーは、Google Earth API Examples > Driving Simulatorと、Google MAPS API に登録する で入手。

 ・ 編集方法は、hogehoge.html を WordPad や SmipleTextなどのテキストエディター、あるいは ”FrontPage Express” などのホームページ制作ソフトのHTMLタグ挿入/編集メニュー で開き編集します。    下記の(例) (*1) と、(*2) を参考に太字部分の編集を任意に行います。   ※: テキストエディターによる編集は、HP制作ソフトとの互換性の問題を生じません(HP制作ソフト間は少し生じる)。

 ・ 作動テストは、ローカル(PC)に保存し、 Internet Explorer 8.x〜 などで開いて。    更新の確認は [F5]キー を押し、サーバーやブラウザーのキャッシュクリアー、最新データ読み込み(≠再アクセス)で行います。

 ・ アップロードや作動テストは、hogehoge.html と同じ階層〔ホルダー/ディレクトリー〕に、使用する画像なども転送/配置し実施。  ※:別ディレクトリーに配置時は、*.html 中のパスは要修正。   FTPなどで変わっ てしまったファイル名は要修正。    スクリプト構文中への改行混入は非作動原因。

 ・ 関連情報 :色記号5〃6スタイルシートリファレンスホームページ開設入門が便利!。   Web DevelopmentWeb開発MSDN IE8 HTMLとCSS開発ツールでサイトを修正スクリプト デバッグの概要HTMLとCSSのサポートCSSの改良点IE7IE6XMLDHTML

 

(*1) : google_earth6.htm (例)         挿入先の  <head> 〜 </head> の、 部分にペーストします。

 HTMLの編集方法   (*1) をテキストエディターで開き、下記↓のHTMLを挿入先ファイルにペースト、太字部分を編集し使用。
〔この列ペースト不要〕   

シフトJIS使用(削除不可)

ieなどに表示するアイコンファイル名(削除可)

<style type= </style>は(削除可)
(*1)〜(*3)表タイトル背景

body 文字色 背景色 下線
ハイパーリンク 〃
表示済みの〃
マウスオーバー時の〃
クリック中の〃
フォント

リンクを新しいWinで開くを標準(削除可)※:target= いろいろ
同じフレーム=_self、ページ全体=_top、親フレーム=_parent
お気に入り、タスクバーに表示するページ名(≠ファイル名)

 

自分の“APIキー”を取得、書き換える。

 

 

 

 

 

 

 

 

 

 

 

 

デフォルト座標 ズーム

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 

<meta http-equiv="Content-Type" content="text/html; charset=x-sjis">

<link REL="SHORTCUT ICON" href="favicon.ico">

<style type="text/css"><!--
.xxx0 { background: #F9F8F9 url('wttec.gif'); }
.xxx1 { background-color:#E3E0DC; }
.xxx2 { background-color:#FFF; }
body { color:#000000; background: #F9F8F9 url('wttec.gif'); text-decoration:none; }
a:link { color:#3C0055; background-color:#FBFAFE; text-decoration:none; }
a:visited { color:#270037; background-color:#EDECEF; text-decoration:none; }
a:hover { color:#1F002E; background-color:#D2F3F4; text-decoration:underline; }
a:active { color:#1F002E; background-color:#F5FFD2; text-decoration:underline; }
font {font-size:12px; line-height:13px;}
body,tr,td,form{ font-family:MS PGothic,MS Gothic,Verdana; font-size: 12px}
 --></style>

<base target="_blank">

<title>サンプルページ  Google Earth6</title>

<!-- ☆ ----------- ↓ この間をコピー&ペーストします。 ------------ -->

<!-- ☆ ----------- ↓ この間をコピー&ペーストします。 ------------ -->
<script type="text/javascript" src="http://www.google.com/jsapi?hl=en&amp;key=ABQIAAAAuMdjTKAMJZ- …… ywdygGusUG8MbQ"></script>
<style type="text/css">@import "index.css";</style>
<script type="text/javascript" src="http://earth-api-samples.googlecode.com/svn/trunk/lib/geplugin-helpers.js"></script>
<script type="text/javascript" src="http://earth-api-samples.googlecode.com/svn/trunk/lib/math3d.js"></script>
<script type="text/javascript" src="simulator.js"></script>
<script type="text/javascript" src="index.js"></script>
<script type="text/javascript">
// <![CDATA[

var DS_ge;
var DS_geHelpers;
var DS_map;

google.load("jquery", "1");
google.load("maps", "2.x");
google.load("earth", "1");

function DS_init() {
$('#directions-form input').attr('disabled', 'disabled');
$('#simulator-form input').attr('disabled', 'disabled');

google.earth.createInstance(
'earth',
function(ge) {
DS_ge = ge;
DS_ge.getWindow().setVisibility(true);
DS_ge.getLayerRoot().enableLayerById(DS_ge.LAYER_BUILDINGS, true);
DS_ge.getLayerRoot().enableLayerById(DS_ge.LAYER_BORDERS, true);
DS_geHelpers = new GEHelpers(DS_ge);

DS_ge.getNavigationControl().setVisibility(ge.VISIBILITY_AUTO);

DS_map = new GMap2($('#map').get(0));
DS_map.setCenter(new GLatLng(35.6934, 139.7498), 13);
DS_map.addControl(new GSmallMapControl());
DS_map.enableContinuousZoom();

$('#directions-form input').removeAttr('disabled');
},
function() {
});

function onresize() {
var clientHeight = document.documentElement.clientHeight;

$('#route-details, #earth, #map').each(function() {
$(this).css({
height: (clientHeight - $(this).position().top - 100).toString() + 'px' });
});
}

$(window).resize(onresize);
onresize();
}

google.setOnLoadCallback(DS_init);

// ]]>
</script>
<!-- ☆ ----------- ↑ この間をコピー&ペーストします。 ------------ -->
 

 

(*2) : google_earth6.htm (例)        挿入先の  <body> 〜 </body> の、 部分にペーストします。

 HTMLの編集方法   (*2)をテキストエディターで開き、下記↓のHTMLを挿入先ファイルにペースト、太字部分を編集し使用。
〔この列ペースト不要〕

※:<body> 部の編集 背景 リンク 表示済みリンクンク アクティブリンクの各色(任意値)

表示サイズ
位置

 

<body onunload="GUnload();"  bgcolor="#F9F8F9" link="#54006C" vlink="#62000D" alink="#00FFFF">

<!-- ★ -----------↑の onunload= …… と、↓ この間をコピー&ペーストします。 ------------ -->
<table style="width: 100%; height: 400px;">
<tr>
<td style="width: 300px" valign="top">
<table style="width: 300px">
<tr>
<td style="width: 50%" valign="top">
<form id="directions-form" onsubmit="return false;" action="get">
<fieldset>
<legend>Directions</legend>
発:<br/>
<input type="text" id="from" value="hino,tokyo"/><br/>
着:<br/>
<input type="text" id="to" value="kamogawa,chiba"/><br/>
<input type="submit" onclick="DS_goDirections();" id="go" value="発進!"/>
</fieldset>
</form>
</td>
<td style="width: 50%" valign="top">
<form id="simulator-form" onsubmit="return false;" action="get">
<fieldset>
<legend>Simulator</legend>
<input type="button" onclick="DS_controlSimulator('reset');" value="Reset"/><br/>
<input type="button" onclick="DS_controlSimulator('start');" value="Start"/><br/>
<input type="button" onclick="DS_controlSimulator('pause');" value="Pause"/><br/>
Speed: <strong><span id="speed-indicator">1x</span></strong><br/>
<input type="button" onclick="DS_controlSimulator('slower');" value="-"/>
<input type="button" onclick="DS_controlSimulator('faster');" value="+"/>
</fieldset>
</form>
</td>
</tr>
</table>
<div id="route-details"></div>
</td>
<td style="width: 67%" valign="top">
<div id="earth" style="border: 1px solid #000; height: 500px;">
<div id="status"></div>
</td>
<td style="width: 33%" valign="top">
<div id="map" style="border: 1px solid #000; height: 500px;"></div>
</td>
</tr>
</table>
<!-- ★ ----------- ↑ この間をコピー&ペーストします。 ------------ -->

====  この間、説明を省略。   任意HTML、動作に無関係 ====

 

< 補足 >    適時参照あれ!。

 ・ Wordpad によるHTMLソース(タグ)を見ながらの直接編集方法。