Google提供なのに地図が選べない
Google サイトの編集画面には「Googleマップ」を貼り付けるメニューがありません。
また素のHTMLを編集してもjavaスクリプトやiframeが含まれているために
Google Maps APIを使った地図を貼り付けることも出来ません。
そんなわけで、GPSとGoogleマップを使ったサイトを主催しているにも関わらず
Googleマップの貼り付けられたページが用意できないというヘンテコなsiteが
「GPSツール GMM2.exe まとめサイト」でした。
今回Googleガジェットを使う事で、Google sitesにGoogleマップを自由に貼り付ける方法を確立しましたのでご紹介
対象
Google Sitesの基本的な操作方法や
Googleマイマップ、Google Maps APIを使った地図作成方法についてご存じの方
Googleマイマップ:
知多半島広域農道を走ってみた
Google Maps API使用ページ:
名古屋の自転車屋ってどう？
の２つを例として、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
※ 使用するガジェットを最初の物から３番目の物に変更 ただいま出先のため13日に画像入れ替えます。
検索窓に iframe と入れて検索を行い、最初の ３番目の「iframe」を選択します。
[5.ガジェットの設定 1]
「高さ」「幅」を入力したらWidth,Heightにも同じ数値を入力します。
[5.ガジェットの設定 2]
最後にGoogle マイマップで採取した 一枚地図のURLをガジェットのURL欄に入力します。
「Google Maps APIを使ったページ」の場合は、その地図が貼り付けられているページの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画像と文章を一部差し替えました。
Google サイトの編集画面には「Googleマップ」を貼り付けるメニューがありません。
また素のHTMLを編集してもjavaスクリプトやiframeが含まれているために
Google Maps APIを使った地図を貼り付けることも出来ません。
そんなわけで、GPSとGoogleマップを使ったサイトを主催しているにも関わらず
Googleマップの貼り付けられたページが用意できないというヘンテコなsiteが
「GPSツール GMM2.exe まとめサイト」でした。
今回Googleガジェットを使う事で、Google sitesにGoogleマップを自由に貼り付ける方法を確立しましたのでご紹介
対象
Google Sitesの基本的な操作方法や
Googleマイマップ、Google Maps APIを使った地図作成方法についてご存じの方
Googleマイマップ:
知多半島広域農道を走ってみた
Google Maps API使用ページ:
名古屋の自転車屋ってどう？
の２つを例として、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
※ 使用するガジェットを最初の物から３番目の物に変更 ただいま出先のため13日に画像入れ替えます。
検索窓に iframe と入れて検索を行い、
[5.ガジェットの設定 1]
「高さ」「幅」を入力したらWidth,Heightにも同じ数値を入力します。
[5.ガジェットの設定 2]
最後にGoogle マイマップで採取した 一枚地図のURLをガジェットのURL欄に入力します。
「Google Maps APIを使ったページ」の場合は、その地図が貼り付けられているページの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画像と文章を一部差し替えました。