GoogleMapをホームページやブログに設置する方法

GoogleMapをホームページやブログに設置する方法

こんなのいまさら説明もいらない!という方も多いと思いますが、自分のメモ書きもかねて、、、

以前はグーグルマップを自分のページに取り込むためには、GoogleMapのAPI Keyを取得して自分でコードを書いてやる必要がありました。今でも複雑なアプリケーションを書くためには必要なのですが、単純に地図だけ表示する場合には、驚くほど簡単にマップを取り込むことが可能になっています。

ステップ1:GoogleMapの画面に切り替える

まず、通常どおり、Googleマップにアクセスです。左上にある「地図」をクリックして、Googleマップの画面に切り替えます。 googletop.jpg

ステップ2:マップを表示してリンクボタンをクリック

ここで、探したいポイントを検索するなり、矢印ボタンを使って表示させるなりして、表示させたいマップを探します。サンプルでは東京駅を表示してみました。

ここで、地図右上にある「このページのリンク」というボタンをクリックします。
googletop.jpg

ステップ3:ソースコードの取得とサイズの調整

すると、「この地図を貼り付けて地図を共有できます」と「HTMLを貼り付けてサイトに地図を埋め込みます」という二つのメニューが出てきます。特にサイズ等に問題がなければそこに書かれたHTMLソースコードをそのままブログやホームページに貼り付けて完了です。
googletop.jpg

表示される地図の大きさを調整したい場合には「埋め込み地図のカスタマイズとプレビュー」をクリックします。

ステップ4:カスタマイズ画面で自由なサイズに変更

そうすると、「カスタマイズ」用の画面が表示されますので、自分のブログやホームページのサイズに合わせて地図を調整の後、ソースコードをコピーして張り付ければバッチリですね!この機能がなかったころは、APIキーを取得して、自分でJavaScriptを書いて・・・と面倒でしたが、ずいぶんと楽になりました。
googletop.jpg

実際に貼り付けてみた:サンプル

実際にこのページにも貼り付けてみました。とっても簡単です。

大きな地図で見る

ほとんどの方はこれで用が足りてしまうのではないかと思います。ぜひ活用を!


日時: 2008年01月31日 15:18
newsingに投稿BuzzurlにブックマークBuzzurlにブックマークlivedoorクリップに投稿 Choixにブックマーク イザ!ブックマーク このエントリーを含むはてなブックマーク
トップに戻る
このエントリーの所属カテゴリ: ネット技術のメモ書き
このエントリーのタイトル:GoogleMapをホームページやブログに設置する方法



copyright © 2000-2008 all rights reserved
あいまいモード・コム - rss2.0 atom
newsingに投稿BuzzurlにブックマークBuzzurlにブックマークlivedoorクリップに投稿 Choixにブックマーク イザ!ブックマーク このエントリーを含むはてなブックマーク