ホームページ、ブログにGoogleマップを表示してみよう
お店・会社の案内ページや、旅行記のページに地図を掲載したいとき、自分で地図を用意したり描いたりするのはちょっと大変。そこでおすすめなのがGoogleマップを利用する方法です。 今回はWindowsVista上でIE7.0とホームページビルダー11を使う方法と、ブログに記事を掲載する方法をご紹介します。HTMLの知識がある方でしたら他のWeb制作ツールやテキストエディタでも実現できますので参考にしてください。 あらかじめ、次の用意をしておいてください。Googleのアカウントを取得(無料)して、ログインしておく
地図を掲載するベースとなるWebページをデザインしておく
掲載用のマイマップを作成する
Googleマップの「マイマップ」は、ユーザーが地図に目印やコメントを書きくわえてインターネット上で公開できる機能です。これを使って、あらかじめ掲載用の地図を編集しておきます。 1. 「マイマップ」をクリックして、「新しい地図を作成」をクリックします。
2. 地図編集パレットでタイトルにわかりやすい名前を付けてください。プライバシー設定「公開/非公開」はどちらでもかまわないのですが、今回は「非公開」にします。設定ができたら「完了」をクリックします。

3. これで、ユーザー用の地図が用意できました。続けて、マイマップの「自分で作った地図」で先ほど作った地図のタイトルにチェックを入れて、「編集」をクリックします。

4. 地図パレットの左上に編集用のツールアイコンが表示されます。Webに掲載したいエリアを地図に表示してから、「目印を追加」をクリックしてから、目的地をクリックします。

5. すると、地図上にフラグが立ち、タイトルと説明コメントを入力するウインドウが開きます。入力したら「OK」をクリックします。

6. 他にも目印をつけたい場合は、同様の作業を繰り返します。ひととおり地図の編集ができたら、「完了」をクリックします。今後は、Googleにご自分のアカウントでログインすれば、いつでも作成した地図を確認・編集することができます。

自分のホームページに地図を掲載する
1. Googleマップのマイページを表示している状態で、ホームページビルダーを起動します。あらかじめ、ベースとなるページをデザインしておきましょう。また、編集モードは、HTMLの入力ができる「標準モード」にしておいてください。
2. Googleマップのページに戻り、マイマップの「自分で作った地図」の中から使いたい地図のタイトルにチェックを入れて、目的場所を選択・クリックします。

3. 「このページのリンク」をクリックするとプルダウンメニューが表示されますので、「HTML を貼り付けてサイトに地図を埋め込みます」の下のHTMLコード上で右クリックして「コピー」をクリックします。

4. ホームページビルダーにウインドウを戻します。地図を貼り付けたい場所をクリックします。

5. 「HTMLソース」タグをクリックすると、HTMLソース編集画面が開きます。ここで、編集をわかりやすくするために2~3行、改行を入れます。

6. 空改行したところで右クリックして「貼り付け」をクリックして、Googleの画面でコピーした、地図を表示させるHTMLコードを貼り付けます。

7. 「プレビュー」タグをクリックして、結果を確認しましょう。

これでGoogleの地図が挿入されました。あとは通常通り保存して出来上がりです。

ブログ(ココログ)に地図を掲載する
ブログに地図を掲載したい場合は、対応するHTMLを使用できるタイプのブログでしたらOK。今回はココログでの方法を紹介します。 1. 記事の新規作成で、地図の紹介・解説文を入力します。
2. 「HTMLの編集」をクリックしてから、文面編集ウインドウにコピーしたGoogleマップのHTMLを貼り付けます。

3. ココログ編集画面の「確認」をクリックして、文面を確認して地図が表示されていることを確認してください。

この方法で地図情報ページを作っておくと、パソコンとインターネットのある環境でしたら、いつでも地図を用意できます。旅行記のホームページを作っている方はもちろん、小学生の子供さんのいる方は、お子さんといっしょに社会科研究のページをつくってみるのはいかがでしょう。どうぞお試しください。
前のスレッド :ネットオークションで騙す。【書評... || 次のスレッド :ケーブルを接続しよう...
