Google Earthコンテンツの作り方 (3) ースタイルー

コンテンツを作るには目印を多数用意することになります。そのアイコンやバルーンのデザインを合わせると、コンテンツとしての統一感が出ます。

スタイルを統一するには、「場所」ペインでコンテンツを入れるフォルダを作ってそのフォルダのスタイルを設定します。
例えば、目印アイコンを変えてみましょう。

道頓堀というフォルダを作って、グリコの看板目印を入れ、さらにかに道楽の目印を追加しました。

まずアイコンのデザインを合わせてみます。
デザインは道頓堀商店会のものを借用して、アイコンを作成します。

これをウェブサーバーに置きました。
ローカルのファイルでもパソコン版ではうまく行きますが、スマートデバイスで見ようとすると失敗しますので、ウェブサーバーに置いて下さい。
(圧縮ファイルで１つにまとめる方法はのちに説明します。)
そして、右クリックでフォルダの「情報を取得」してアイコンのボタンをを設定すると、両方の目印のアイコンが変わります。

バルーンの中身のデザインも合わせてみましょう。
「情報を取得」で現れるウィンドウの「スタイル、色」タブを使います。

「スタイルを共有」をクリックして下さい。

「テキスト」に以下の内容を入れます。

<html>
<head>
<style type="text/css">
html, body {
  margin: 0;
  padding: 0;
}
#main {
  background-color: red;
  -webkit-border-radius: 10px;
}
</style>
<script src="http://maps.google.com/maps/api/js?sensor=false"></script> <!-- Google Maps APIをロードします -->
<style>
#streetview {
  width: 480px;
  height: 480px;

}
</style>
<script type="text/javascript">
window.onload = function() {
var panorama = new  google.maps.StreetViewPanorama(document.getElementById("streetview"), panoramaOptions);
map.setStreetView(panorama);
};
</script>
</head>
<body>
<div id="main">
<h1>道頓堀だよ！</h1>
<h2>$[name]</h2> <!-- $[name]には目印の名前が入ります -->
<div id="streetview"></div>
$[description] <!-- $[description]には目印の説明が入ります -->
</div>
</body>
</html>

スタイルだけでなく、javascriptの読み込みも共通化したので、各目印の説明は以下のように短くなります。

<p>グリコの看板は戎橋からよく見られます。</p>
<script type="text/javascript">
var panoramaOptions = {
  position: new google.maps.LatLng( 34.669056, 135.501361), //目印の緯度、経度を引数にします
  pov: {
    heading: 200, //グリコの看板は南南西方向です
    pitch: 20, // 少し見上げます
    zoom: 1
  }
};
</script>

<p>戎橋を渡るとすぐかに道楽です
。</p>
<script type="text/javascript">
var panoramaOptions = {
  position: new google.maps.LatLng( 34.668736, 135.501497), //目印の緯度、経度を引数にします
  pov: {
    heading: -20, //かに道楽の看板は北方向です
    pitch: 20, // 少し見上げます
    zoom: 1
  }
};
</script>

さあさあ、動作確認してみましょう。

いかがでしょうか？

デザインのセンスなくてすいません…

次回は、フォルダの目印からツアを作る方法について書きます。

おまけ

レイアウトを考える際に、バルーンのサイズを知っておくことが重要かと思います。
バルーンのサイズだけでなく、バルーン内でできることを色々調べられるように、簡単なJavaScriptコンソールを作りましょう。

目印を作って、説明に以下の内容を入れて下さい。

<html>
<head>
<meta name="viewport" content="initial-scale=1"> 
</head>
<body>
<form onsubmit="document.getElementById('output').innerHTML = eval(document.getElementById('oneliner').value);">
<input id="oneliner" type="text" cols="80"></input>
<input type="submit"></input>
</form>
<div id="output" width="100%" height="1em">結果</div>
</body>
</html>