<object width="250" height="250"><param name="movie" value="http://www.youtube.com/v/6mrG_bsqC6k&hl=en"></param><param name="wmode" value="transparent"></param><embed src="http://www.youtube.com/v/6mrG_bsqC6k&hl=en" type="application/x-shockwave-flash" wmode="transparent" width="250" height="250"></embed></object>
<p><a class="google" href="http://www.gearthblog.com/blog/archives/2008/05/google_earth_plugin_in_a_blog_post.html" onclick="window.open('http://www.gearthblog.com/blog/archives/2008/05/google_earth_plugin_in_a_blog_post.html'); return false;">Google Earth Blog</a>でグーグルアースプラグインをダウンロードすることでブラウザ上でグーグルアースを表示できるようになると紹介されていたので早速試してみました。</p>

<!--more-->
<h3 class="header-label">ブログにグーグルアースを埋め込む</h3>
<iframe width="500" height="666" src="http://web-marketing.zako.org/google/google-earth/Embedding-Google-Earth.html" scrolling="no" frameborder="0"></iframe>
<p>大きい画面で見る</p>
<p>いや、これはすごい、一見の価値ありです。通常のグーグルアースで見るのと何ら変わりないように感じられます。</p>
<p>ここで見てみたい方は、プラグインダウンロードのボタンを押して専用プラグインをダウンロードしてください。</p>

<h4 class="header-label">グーグルアースの貼り付け手順</h4>
<ol>
<li><a class="google" href="http://code.google.com/apis/maps/signup.html" onclick="window.open('http://code.google.com/apis/maps/signup.html'); return false;">Google Maps API key</a>を取得します。使うのは↓の画像で強調している部分のコードです。<br /><img alt="Google-Maps-API-key.gif" src="http://web-marketing.zako.org/images/Google-Maps-API-key.gif" width="400" height="129" /></li>
<li>下記サンプルコードを参考に（面倒であればそのまま）ファイルを作成<br />
<textarea name="code" class="xml" cols="60" rows="5" id="code">
<html>
<head>
<title>Google</title>
<!-- *** Replace the key below below with your own API key, available at http://code.google.com/apis/maps/signup.html *** -->
<script type="text/javascript" src="http://www.google.com/jsapi?key=ここに取得したキーを入れる"></script>
<script type="text/javascript">
google.load("earth", "1");
google.load("maps", "2.99");  // For JS geocoder

var ge = null;
var geocoder;


function init() {
geocoder = new GClientGeocoder();
google.earth.createInstance("map3d", initCB, failureCB);
}

function initCB(object) {
ge = object;
ge.getWindow().setVisibility(true);
}

function failureCB(object) {
alert('load failed');
}

function submitLocation() {
var address = document.getElementById('address').value;
geocoder.getLatLng(
address,
function(point) {
if (point && ge != null) {
var la = ge.createLookAt('');
la.set(point.y, point.x, 100, ge.ALTITUDE_RELATIVE_TO_GROUND,
0, 0, 4000);
ge.getView().setAbstractView(la);
}
}
);
}

</script>
</head>
<body onload='init()' id='body'>
<div>
<form name='searchform' id='searchform' action='javascript:submitLocation();void(0);'>
<input type=text size=60 id='address'></input>
<input type=submit value='Go to location'>
</form>
</div>

<div id='map3d_container' style='border: 1px solid silver; height: 500px;'>

<div id='map3d' style='height: 100%;'></div>
</div>
</body>
</html></textarea></li>
<li>私の場合はこのページにiframeを使って↓のように埋め込んでいます。<br />
<code>&lt;iframe width=&quot;500&quot; height=&quot;666&quot; src=&quot;http://web-marketing.zako.org/google/google-earth/Embedding-Google-Earth.html&quot; scrolling=&quot;no&quot; frameborder=&quot;0&quot;&gt;&lt;/iframe&gt;</code></li>
</ol>


<p class="picture"><img alt="Google-Earth-Plugin.jpg" src="http://web-marketing.zako.org/images/Google-Earth-Plugin.jpg" width="400" height="264" />
ちなみに様々なオプションをつけた際の追加コードを生成してくれるサイトもありました。<br />
<a class="google" href="http://www.google.com/earth/plugin/examples/samples/" onclick="window.open('http://www.google.com/earth/plugin/examples/samples/'); return false;">Google Earth Plugin - Interactive Samples</a></p>
<p>さらに詳しい開発者用情報などを知りたい方は<a class="google" href="http://code.google.com/intl/ja/apis/earth/" onclick="window.open('http://code.google.com/intl/ja/apis/earth/'); return false;">Google Earth API</a>へどうぞ。</p>

<p>プラグインをインストールする必要があるものの、ここまで気軽にグーグルアースをサイト上で楽しめるとなると、マッシュアップサービスの機能がさらにすごいものになっていきそうですね。いろいろと楽しみです。</p>
<p>Via：<a class="google" href="http://www.gearthblog.com/blog/archives/2008/05/google_earth_plugin_in_a_blog_post.html" onclick="window.open('http://www.gearthblog.com/blog/archives/2008/05/google_earth_plugin_in_a_blog_post.html'); return false;">Google Earth Blog</a></p>

<div class="a-wrap"><div class="a-left-box"><a href="http://www.amazon.co.jp/gp/redirect.html%3FASIN=4861263085%26tag=snowboadteamz-22%26lcode=xm2%26cID=2025%26ccmID=165953%26location=/o/ASIN/4861263085%253FSubscriptionId=028QVM5GAF1MWA4NBMR2" target="_blank"><img class="a-img" src="http://ecx.images-amazon.com/images/I/51rDfLKJsYL._SL160_.jpg" alt="77のキーワードで知る図解 インターネットで稼ぐブログ・メルマガ・Webサイト構築の基本" /></a></div><div class="a-right-box"><div class="a-top-inner"><form class="a-cart-form" method="post" action="http://www.amazon.co.jp/gp/aws/cart/add.html" target="_blank"><input type="hidden" name="AssociateTag" value="snowboadteamz-22" /><input type="hidden" name="SubscriptionId" value="028QVM5GAF1MWA4NBMR2" /><input type="hidden" name="ASIN.1" value="4861263085" /><input type="hidden" name="Quantity.1" value="1" /><input type="image" name="submit.add-to-cart" src="http://rcm-images.amazon.com/images/G/09/extranet/associates/buttons/remote-buy-jp5.gif" /></form></div><div>77のキーワードで知る図解 インターネットで稼ぐブログ・メルマガ・Webサイト構築の基本<br /></div><div class="a-mid-inner"><div class="a-bot-inner">価格：<span class="a-price-text">￥ 1,470</span><br />平均評価：5.0<br />納期：通常24時間以内に発送<br /></div></div><div class="a-copyright"><a href="http://www.amazon.co.jp/gp/redirect.html%3FASIN=4861263085%26tag=snowboadteamz-22%26lcode=xm2%26cID=2025%26ccmID=165953%26location=/o/ASIN/4861263085%253FSubscriptionId=028QVM5GAF1MWA4NBMR2" target="_blank"><br />Amazon で詳細を見る</a> by <a href="http://astore.amazon.co.jp/snowboadteamz-22" title="WEB担当者の本屋" target="_blank">WEB担当者の本屋</a></div></div></div><br clear="all" />

<script class="javascript" src="http://web-marketing.zako.org/js/shCore.js"></script>
<script class="javascript" src="http://web-marketing.zako.org/js/shBrushXml.js"></script>
<script class="javascript">
dp.SyntaxHighlighter.HighlightAll('code');
</script>