MB-Support

パソコン初心者のサポートページ

コピペで簡単に Google マップを自分のサイトに掲載できる様になりました

 JavaScript を駆使して自分のサイトに Google map を埋め込む API(アプリケーション プログラム インターフェイス)は登場していましたが、もっと単純にサイトに掲載できる方法が公開されました。


Google Map は、世界中の地図、航空写真、または両者を組み合わせた航空写真型の地図を、マウスをドラッグアンドドロップとスクロールバーで自由に操れるサービスですが、この地図を自分のサイトに埋め込む方法は、それまで API を利用した JavaScript などのプログラム言語の上級者にしかできないものでした。



単刀直入にどんな事ができるかと言うと、以下。


拡大地図を表示


上の様に、自分のサイトに簡単に Google map を貼り付ける事ができます。 どんな風に簡単なのかと言えば、TouTube の動画を貼り付けるみたいにです。 ブログなどの投稿に貼り付ける事もできますが、もちろん、ソースを許可されている場合のみとなります。 貼り付けたマップは、インタラクティブに富んでいて、拡大縮小、移動、表示形式の変更をマウスのカーソルでコントロールできます。



例えば、東京ディズニーランドに行った時の日記をブログやホームページに掲載する場合。 まずは Goolge Map にアクセスして、「東京ディズニーランド」を検索します。 目的の場所が見つかったら、「地図」「航空写真」「地図+航空写真」を選択します。 右の例では、「地図+航空写真」を選択しています。



貼り付ける地図が定まったら、右上の「このページのリンク」を左クリックします。 http:// から始まるアドレスは、単純なリンクアドレスです。これにより作成できるリンクは、テキストリンクとなります。 今回追加されたのは、iframe 形式のリンクアドレスです。 「HTML を貼り付けてサイトに地図を埋め込みます」の下のフォームを左クリックすると、アドレス全体が反転します。 ここで、キーボードの「Ctrl」+「C」キーを押して、アドレスをコピーします。



今回はテストとして、デスクトップに作成したホームページに、上でコピーしたアドレスを貼り付けて見ます。 ソースを編集できるアプリケーションでファイルを開きます。右の例ではメモ帳を利用しました。



メモ帳が開いたら、アドレスを挿入したい場所にカーソルを移動して、「Ctrl」+「V」キーを押して貼り付けます。 もし、貼り付けられない場合は、もう一度アドレスをコピーして繰り返します。



貼り付けたら、メモ帳を閉じます。この時、変更した内容を保存します。



ファイルをダブルクリックすれば、ブラウザで開きます。 インタラクティブ(対話形式)な Google Map が ifram 横幅 425px 高さ 350 px で埋め込まれます。



Live Search でもサイトに地図を埋め込めますが、現時点ではアプリケーションを利用する必要があるので気軽とは言えません。 気軽に埋め込む場合は、Windows Live Spaces に限定されます。Google Map でも、もちろんタグを利用できないブログでは利用できませんが(Mixiでも無理)、ifram と使った気軽なソースで埋め込めるので難易度は低いと思われます。




戻る 一覧表示 次へ


Copyright © 2018 MB-Support パソコン初心者のサポートページ All Rights Reserved.

管理人サイト閲覧方法プライバシーポリシー著作権/免責事項