グーグルアースをブログに貼り付けてみました

2008-05-30 | Sigeo | 0 | カテゴリ Google Earth

Google Earth Blogでグーグルアースプラグインをダウンロードすることでブラウザ上でグーグルアースを表示できるようになると紹介されていたので早速試してみました。

ブログにグーグルアースを埋め込む

大きい画面で見る

いや、これはすごい、一見の価値ありです。通常のグーグルアースで見るのと何ら変わりないように感じられます。

ここで見てみたい方は、プラグインダウンロードのボタンを押して専用プラグインをダウンロードしてください。

グーグルアースの貼り付け手順

Google Maps API keyを取得します。使うのは↓の画像で強調している部分のコードです。
下記サンプルコードを参考に（面倒であればそのまま）ファイルを作成
<html> <head> <title>Google</title>  <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>
私の場合はこのページにiframeを使って↓のように埋め込んでいます。
<iframe width="500" height="666" src="http://web-marketing.zako.org/google/google-earth/Embedding-Google-Earth.html" scrolling="no" frameborder="0"></iframe>