「Googleマップ」 や 「Yahoo!地図」 の地図をページに挿入できます。Googleマップの場合は、APIキー、Yahoo!地図の場合はアプリケーション ID が必要です。
地図を挿入するとき、縮尺と大きさを設定できます。数字が小さいほど詳細な地図に、数字を大きくすると広域の地図になります。挿入した地図はホームページ・ビルダーの編集画面には表示されないが 「プレビュー」 タブかブラウザーで確認できます。さらに、ページに挿入した地図を編集することもできます。
Google Maps API を使う場合は文字コードを UTF-8 で作成しなければなりません
コンテンツ内で Google Maps API を使う場合は文字コードを UTF-8 で作成しなければなりません。
ホームページ・ビルダーのメニュー 「ツール」 から 「オプション」 をクリックし、「オプション」 ダイアログ画面を表示します。 「ファイル」 タブを選択し、「ファイルのオプション」 グループ内の [出力漢字コード] に Unicode (UTF-8) を設定します。「OK」 ボタンで閉じます。
① 地図を挿入する場所をクリックします。
② 「挿入」 → 「マップ」 → 「Googleマップ」 をクリックします。
③ 「登録ページをブラウザで開く」 をクリックします。
Google Maps API とは
Google 社が提供する地図情報サービスである Google Maps (グーグルマップ) の持つ機能を、インターネットを介して外部から利用するための手続きをまとめた API。 Google Maps API を利用することで、地図情報を活用したサービスを簡単に構築することができる。
Google Maps API は JavaScript の関数群として提供されており、Web サイトにそれらの関数を埋め込むことで Google Maps と同様の機能を Web サイトから利用することができる。Google Maps API を利用することによって、Web サイト内に Google Maps と同様の地図を表示したり、地図上に追加情報を表示したりといったことが可能となる。住所と緯度・経度を変換するなどの一部の機能は JavaScript 関数から利用できるほかに、Google Maps のサーバに直接 HTTP リクエストを送信することでも利用できる。
API とは
あるプラットフォーム (OSやミドルウェア) 向けのソフトウェアを開発する際に使用できる命令や関数の集合のこと。また、それらを利用するためのプログラム上の手続きを定めた規約の集合。個々のソフトウェアの開発者がソフトウェアの持つすべての機能をプログラミングするのは困難で無駄が多いため、多くのソフトウェアが共通して利用する機能は、OSやミドルウェアなどの形でまとめて提供されている。個々の開発者は規約に従ってその機能を「呼び出す」だけで、自分でプログラミングすることなくその機能を利用したソフトウェアを作成することができる。〔 IT用語辞典 e-Words 〕
④ ページ画面を下方にスクロールします。
⑤ 「利用規約を読んだ上でこれに同意します」 にチェックを入れます。
⑥ 地図を挿入するホームページのサイトの URL を入力します。
⑦ 「API キーを生成する」 をクリックします。
⑧ Google アカウントのログインが求められたら、メールアドレスとパスワードを入力し、「ログイン」 ボタンをクリックします。
"Google Maps API キーにご登録いただきありがとうございます。" のタイトルが表示されます。
⑨ 生成されたキーをドラッグして、Ctrl + C キーでコピーします。
⑩ タスクバーのボタンをクリックして、ホームページ・ビルダーの画面を表示します。
⑪ [Maps API キー] の欄をクリックし、Ctrl + V キーを押します。
⑫ 「OK」 をクリックします。
表示された 「地図の挿入(Googleマップ)」 ダイアログボックスで以下を設定します。
⑬ ズームレベルを選択します。
⑭ 挿入したい地図の住所を入力します。
⑮ 「検索」 をクリックします。
⑯ 「OK」 をクリックします。
地図が編集ページに挿入されます。編集画面(右図) では、地図のイメージのみが表示されます。
⑰ 挿入した地図をプレビューあるいはブラウザーで確認します。
ブラウザでの見え方 → hpb53_sample01.html
⑱ 地図のイメージを選択して右クリックし、「マップの編集」 をクリックします。
挿入した Google マップを選択し、メニューバーから 「編集」 → 「マップの編集」 を選択でも同じです。
「地図の挿入(Googleマップ)」 ダイアログボックスが表示されます。ここでは、地図の位置や種類、縮尺、大きさを設定することなどができます。
表示されたダイアログのプレビュー画面に Google マップが表示されたら、[詳細設定] ボタンを選択します。
[地図の詳細設定 (Google マップ)] ダイアログが表示されます。
(注意)Google マップが表示される前に [詳細設定] ボタンをクリックすると、マーカーの設定画面に Google マップが表示されなくなることがあります。
「詳細設定」 では、Google マップ上の目的地がわかり易いようにマーカー (印) をつけたり、目的地の住所などの情報やコメントを吹き出しで表示させることができます。ここでは、既に設定した Google マップにマーカーと吹き出し情報を表示する操作を地図の詳細設定ヘルプから紹介します。
[追加] ボタンを選択します。
マーカー名を入力します。
マーカーを設定する場所が地図の中央位置にくるように、地図上をマウスでドラッグして調整します。調整後、[地図の中心位置を取得] ボタンをクリックし、現在の中心位置の経緯と緯度を取得します。
マーカーに吹き出し情報を設定します。
[情報ウィンドウの設定] 項目の [情報ウィンドウを表示] にチェックをつけ、 [ウィンドウ出現方法] を選択します。
[表示する内容] のテキストボックスに、吹き出し内に表示させたい内容を入力します。
[OK] ボタンで各ダイアログを閉じます。
プレビュー画面に切り替えて表示を確認します。
地図検索結果の地図をページに挿入する方法です。
① Google のホームページを表示します。
② 「地図」 をクリックします。
③ 目的の住所を入力し、「地図を検索」 ボタンをクリックします。
④ [リンク] をクリックします。
⑤ [HTMLを貼り付けてサイトに地図を埋め込みます]、の [埋め込み地図のカストマイズとプレビュー] をクリックします。
⑥ "1.カスタマイズ"で、ページに挿入したときのサイズを変更します。
⑦ "3.サイトに地図を埋め込む場合はこの HTML をコピーして貼り付けます。" の下にあるボックス内の HTML ソースを選択し、Ctrl + C キーでコピーします。
⑧ ホームページ・ビルダーに切り替えて、編集中のページを開き、[HTMLソース] で表示する。
⑨ コピーしたHTMLソースを該当の場所に貼り付けます。
⑩ 「プレビュー」 にて確認します。
ブラウザでの見え方 → hpb53_sample02.html
自分の地図を作成して共有します。知っている場所やルートを地図で表示します。テキスト、写真、ビデオを追加して共有します。
地図を作成したり編集したりするには、Google アカウントにログインする必要があります。地図を見るだけであれば、ログインは不要です。特定のユーザーが作成した地図を検索することもできます。
① Google のホームページで 「地図」 をクリックします。
② 「マイマップ」 を選びます。
③ Googleアカウントでログイン済みで、そのアカウントで作成した既存の地図がある場合は [自分で作った地図] にリストされます。既存の地図を編集する場合は [自分で作った地図] から選んで開きます。左側パネルでその地図をクリックし、[編集] をクリックします。ステップ ⑤ へ飛びます。
③ 既存の地図が無い場合、あるいは新たに地図を作成する場合は、[新しい地図を作成] をクリックし、ステップ ④ へ飛びます。
③ Googleアカウントへログインしていない場合は、[はじめに] をクリックします。
④ [タイトル] と [プライバシー設定と共有設定] を入力します。
⑤ 該当の地図を表示します。検索窓に入力し 「地図を検索」 ボタンをクリックします。
⑥ マイマップを編集します。
⑦ 作成した地図へのリンクを貼り付ける
「リンクの挿入」 から URL への値を貼り付けることができません。
URL が複数行になっている場合、URL のコピーペーストで1行目だけが貼り付けられ、二行目以降を貼り付けできないことがあります。(右図)
その場合は、以下のように、ソースに直接貼り付けます。
リンクを挿入する文字列あるいは画像などを選択します。「挿入」から「リンク」で、リンク属性画面の「ラベルへ」タブを開きます。「ラベル」に "#"(井桁)を入力し、「OK」 ボタンで閉じます。
そのまま (リンクを挿入する文字列あるいは画像などを選択したまま) ソース表示にします。選択部分が黄色文字でハイライトされるので、その直前の <a href="##"> の ## 部分をドラッグして選択し、貼り付けを行います。## が URL で置き換わります。
「リンク」 をクリックしてページに貼り付けることもできます
⑦ で「共同編集」 をクリックする代わりに、地図画面右隅にある 「リンク」 をクリックして、地図をページに埋め込むこともできます。
その場合は、上述のGoogle マップを挿入する (その2) の ④ に進みます。
⑧ 「共同編集者の招待画面」 の右上隅のクローズ [X] ボタンをクリックして 「共同編集者の招待画面」 を閉じます。
共同編集者の管理は設定しません
Web ページからリンクして閲覧者に見てもらう場合は、共同編集(下図)はセットしない方が無難でしょう。
⑨ プレビューで地図が表示されるのを確認します。
これにより、作成編集した地図をページ閲覧者に見てもらうことができます。