バルーン内でJavaScriptが使用できるようになって久しいのですが、ようやくどのような感じで使えるのか少し試してみました。
とりあえず、jQuery（参考：jQuery日本語リファレンス）を使って、HelloWorldです。KMZファイルはこちら（example1.kmz）です。
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript" language="javascript">
google.load("jquery", "1.3.2");
function say_hello(){
$("#HelloWorld").append("<p>Hello World!!</p>");
};
</script>
<title>無題 1</title>
</head>
<body>
<input name="say_hello" type="button" value="Hello World!!" onclick="say_hello()" />
<div id="HelloWorld"></div>
</body>
</html>
HTML（とJavaScript）はこんな感じです。
ちなみに、jQueryはGoogle AJAX Libraries APIから呼ばせてもらっています。
Google AJAX Libraries API
http://code.google.com/intl/ja/apis/ajaxlibs/
手順前後ですが、KMLリファレンスを確認（一部抜粋）してみます。
大部分の Javascript はサポートされています。ダイアログ ボックスは作成できません。そのため、alert() や prompt() のような関数は表示されません。ただし、他のエラーや例外と同様に、システム コンソールには表示されます。
というわけで、windowオブジェクトはどうかと思い、jQueryとは関係なくwindow.resizeTo()を試してみましたがダメでした。ステータスバーなんて関係があるのかわかりませんが、window.status()も試したところ、こちらもダメでした。window.close()もダメでした。
試したのはこの３つだけですが、windowオブジェクトはダメということなのでしょう。たぶん…。（次の記事にてさらに試してみます。）
NG関連ついでに、KMLリファレンスに次のように記載してある、CSSのurlも調べてみます。
Google Earth による説明バルーン コンテンツ内の URL の処理方法のために、「url」関数（background-image: url('http://www.example.com/background.png'); など）を使用した CSS 宣言は正しく動作しません。
jQueryを利用して、動的にstyleを設定します。
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript" language="javascript">
google.load("jquery", "1.3.2");
function css_background_url(){
$("#CssaBackgroundUrl").css("background-image", "url('http://noblesse-oblige.jp/earth/sozai/no-logo.gif')");
};
</script>
<title>無題 1</title>
</head>
<body>
<input name="css_background_url" type="button" value="background-image:url();" onclick="css_background_url()" />
<div id="CssaBackgroundUrl" style="width:600px;height:300px;"></div>
</body>
</html>
NGでした。
つづく…（予定）
4 コメント:
はじめまして
バルーン内にjQueryを参考にしながら、タウンマーケットのKMLのバルーン内にGoogleMapを表示させてみました。
チラシ情報.kml
fujisan777さんへ
はじめまして。
GoogleEarth上はもちろん、KMLの中身も拝見させていただきましたが、いろいろと興味深いKMLでした。
本記事内でも紹介させていただきたいと思っています。足取りが重いので何時になるかはわかりませんが…。なるべく早くに…。
こんばんは
是非紹介していただけると幸いです。
今回のチラシ情報は思い切ってGoogleEarthギャラリにも登録したのですが、プレビュー画面でGoogleEarthAPIからこのKMLを見てバルーンをみてびっくり
GoogleEarthAPIでは、CSSもJavascriptも対応できていないことがわかりました。
こんばんは
ブログを以下の場所に作成いたしました。
http://fujisan777.sblo.jp/
このブログ内にEarth on Cubic-Sightさんのサイトをリンクさせていただきました。
もしも不都合がある場合にはご連絡ください。
新しく作成したKMLファイルは、ブログ上で報告して行こうかと思っています。
もしもお時間がありましたら、ぜひ私のページに遊びに来てください。
コメントを投稿