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

2008年5月30日 | 0 | カテゴリ Google Earth

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

針のいらないホッチキス コクヨハリナックスわたくし愛用中です！
このブログは、さくらのレンタルサーバで動いています。

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

大きい画面で見る

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

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

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

Google Maps API keyを取得します。使うのは↓の画像で強調している部分のコードです。
下記サンプルコードを参考に（面倒であればそのまま）ファイルを作成
<html> <head>  <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>

ちなみに様々なオプションをつけた際の追加コードを生成してくれるサイトもありました。
Google Earth Plugin – Interactive Samples

さらに詳しい開発者用情報などを知りたい方はGoogle Earth APIへどうぞ。

プラグインをインストールする必要があるものの、ここまで気軽にグーグルアースをサイト上で楽しめるとなると、マッシュアップサービスの機能がさらにすごいものになっていきそうですね。いろいろと楽しみです。

Via：Google Earth Blog

77のキーワードで知る図解インターネットで稼ぐブログ・メルマガ・Webサイト構築の基本

価格：￥ 1,470
平均評価：5.0
納期：通常24時間以内に発送

Amazon で詳細を見る by WEB担当者の本屋

スポンサードリンク

前の記事： iPhone版グーグルアース！？「iPhone Earth」が何気にクール
次の記事：グーグルアースを埋め込んでいるWEBサービス4つ
ジャンル： API, グーグルアース

この記事へのリンクURL
この記事へのリンクタグ: 表示サンプル：グーグルアースをブログに貼り付けてみました - WEBマーケティングブログ
この記事へのリンクタグ(その２): 表示サンプル：グーグルアースをブログに貼り付けてみました(WEBマーケティングブログ)

検索

RSS購読ツール

メニュー

Loading...
カテゴリー

Loading...
- WEBマーケティングブログの日記
  1. かしこいUSBポートの使い方ができる「Infinite USB」 2010年 4月 3日
    ネットブックやタブレットPCなど、USBポートが少ないデバイスに役立ちそ�. […]
  2. 新卒採用の会社説明会で座談会を行いました 2010年 3月 17日
    車のディーラーからベンチャー企業に転職し、独立、そして新たなベンチ�. […]
  3. ノート２冊をまとめて使えるコクヨのSYSTEMIC［システミック］が使える件 2010年 2月 24日
    最近は、仕事の効率化を図るために、情報を集約する母艦ノート、スキマ�. […]
- 市場調査データ検索データベース
  1. 米スマートフォン Androidの伸びがすごい 2010年 6月 19日
    Insight for WebAnalytics: 米スマートフォン、携帯市場シェアの2割を突破スマー. […]
  2. 世界のインターネット利用者の82％がGoogleを利用 2010年 6月 19日
    Insight for WebAnalytics: 世界のインターネット利用者の82％がGoogleを利用この�. […]
  3. Twitterを運営している企業は4%、アクセス解析する気もない企業が1割超 2010年 6月 19日
    Insight for WebAnalytics: Twitterを運営している企業は4%、アクセス解析する気も�. […]

グーグルアースをブログに貼り付けてみました、1 topsyWidgetPreload({ “url”: “http%3A%2F%2Fweb-marketing.zako.org%2Fgoogle%2Fgoogle-earth%2Fembed-g …