にやにや製作:GoogleMapとGPSを自転車で使う

お気楽・ごくらく ( ・∀・)ニヤニヤ
     
製作 かるかる

広告

※このエリアは、60日間投稿が無い場合に表示されます。記事を投稿すると、表示されなくなります。

ガジェットを使って Google siteにGoogleマップを貼り付ける

2008年11月06日 19時27分48秒 | Google Hacks
Google提供なのに地図が選べない

Google サイトの編集画面には「Googleマップ」を貼り付けるメニューがありません。
挿入メニュー

また素のHTMLを編集してもjavaスクリプトやiframeが含まれているために
Google Maps APIを使った地図を貼り付けることも出来ません。
拒否ダイアログ

そんなわけで、GPSGoogleマップを使ったサイトを主催しているにも関わらず
Googleマップの貼り付けられたページが用意できないというヘンテコなsiteが
「GPSツール GMM2.exe まとめサイト」でした。

今回Googleガジェットを使う事で、Google sitesにGoogleマップを自由に貼り付ける方法を確立しましたのでご紹介

対象
Google Sitesの基本的な操作方法や
Googleマイマップ、Google Maps APIを使った地図作成方法についてご存じの方

Googleマイマップ:
知多半島広域農道を走ってみた

Google Maps API使用ページ:
名古屋の自転車屋ってどう?
の2つを例として、Googleサイトへ貼り付けてみます。

流れは表示したいGoogleマイマップのURLを取得し、
GoogleSites上のGoogleガジェットにそのURLを設定して表示をさせる という順になっております。


--------------------------------
Google SitesにGoogleマップを貼り付ける方法

[0.前提]

既にGoogleマイマップかWEBページにGoogle Maps APIを使った地図が用意されていること。
マイマップ用意


[1.Googleマイマップ URLの取得]

1.カスタマイズページの表示
Google Sitesに貼り付ける地図を表示して
右上の「リンク」→「埋め込み地図のカスタマイズとプレビュー」とクリックします。
マイマップリンク

2.地図の表示
カスタマイズページに表示された地図画像の上で右クリックし
「このフレーム」→「このフレームだけを表示」を選びます。
地図だけのページになります。
カスタマイズページの表示

3.リンクの採集
地図だけページのURLをコピーします。
一枚ページ

採取したURLを消さないようにします。


[2.Googleサイト ページを作成]

どれを選んでも同じです。普通に「ウェブページ」で作成します。
新しいページを作成


[3.グーグルガジェットの選択]

作成したページのメニューから「挿入」→「その他」を選択して
ガジェット選択ダイアログを表示します。
ガジェット選択ダイアログ


[4.ガジェットの選択]

※2008/11/10
※ 使用するガジェットを最初の物から3番目の物に変更 ただいま出先のため13日に画像入れ替えます。

検索窓に iframe と入れて検索を行い、最初の 3番目の「iframe」を選択します。
iframeガジェット選択


[5.ガジェットの設定 1]

「高さ」「幅」を入力したらWidth,Heightにも同じ数値を入力します。
ガジェット設定


[5.ガジェットの設定 2]

最後にGoogle マイマップで採取した 一枚地図のURLをガジェットのURL欄に入力します。
「Google Maps APIを使ったページ」の場合は、その地図が貼り付けられているページのURLをそのままガジェットの設定URL欄に入れてください。
URL欄に一枚ページ
「OK」を押して、ページを保存します。


[6.できあがり]

できあがり
マップのサイズは、ガジェットの「高さ」「幅」の設定でなされます。


注意:
GoogleマップにYouTube動画が入っている地図を貼り付けるとブラウザが必ず落ちました。
環境:Windows2000SP4,FireFox 3.01(つД`)

GoogleマイマップにYouTube動画の入った地図の元ネタ:YouTube動画テスト


まとめ

iframeガジェットを使う事でGoogle Siteに地図を貼り付けることができるようになりました。これと同じ方法で JavaスクリプトやFlashのページも追加出来るのではないかと考えています。
そんなページを作ったら教えてね。

------------------
参考:
Google Siteに貼り付けられた各種Googleマップ

知多半島広域農道を走ってみた
写真付きマイマップの例 「二之瀬・自転車一番乗り」
Google Maps APIを使ったページ:名古屋の自転車屋ってどお?GoogleSites版
別の面倒な方法 名古屋の自転車屋ってどお?

※11/12画像と文章を一部差し替えました。

コメント (3)   この記事についてブログを書く
« Flash10 ブラウザ上で動作す... | トップ | FlashをGoogle Sitesに表示 »
最新の画像もっと見る

3 コメント

コメント日が  古い順  |   新しい順
カスタムガジェット (しろうと)
2008-11-15 23:13:34
<?xml version="1.0" encoding="UTF-8"?>
<Module>

<Content type="html"><![CDATA[
testing


dd = new Date();
_gel("hogehoge").innerHTML = dd.toLocaleString();

]]></Content>

</Module>
こんなtest.xmlを別サイトに置いて、URLを指定してこれをガジェットを挿入してみたところ、IEでも
表示してくれました。
しかし、Google sitesに添付ファイルとしておいた物をガジェットを挿入してみても、上手く動いてくれません。
上手く投稿出来ていない (しろうとですみません)
2008-11-15 23:24:38
<?xml version=1.0 encoding=UTF-8?>
<Module>

<Content type=html><![CDATA[
<h1>testing</h1>
<div id=hogehoge></div>
<script>
dd = new Date();
_gel(hogehoge).innerHTML = dd.toLocaleString();
</script>
]]></Content>

</Module>
ファイルキャビネットページのファイルはダウンロード用 (かるかる)
2008-11-16 20:54:36
ファイルキャビネットにアップロードしたファイルは
htmlであろうとxmlであろうと、ダウンロードファイルの対象になっていると思われます。
利用者はいじれないので、どうにもなりません。
別のサイトからの参照でやるしか手はないと思われます。

コメントを投稿

Google Hacks」カテゴリの最新記事