Googleマップを埋め込んでホームページやブログに地図を追加する

スポンサーリンク
スポンサーリンク

Googleマップ 地図の埋め込み

Googleマップをホームページやブログに埋め込んで、地図を追加する方法をご紹介します。

GoogleマップはGoogleが提供する多機能地図ウェブサービスです。地図の拡大縮小が自由自在で、車や交通機関別のルート検索や、乗換案内の機能もあります。

Googleマップの埋め込みはとても簡単で、地図のhtmlコードをコピーして、ホームページやブログに貼り付けるだけです。地図の利用はもちろん無料、慣れれば1分もかかりません。

Googleマップを使うと場所やアクセス方法がわかりやすくなるので、どんどん活用しましょう。

スポンサーリンク

埋め込み位置を表示

では、Googleマップの地図を埋め込んでみましょう。サンプルの場所は京都市役所にします。

まずはGoogleマップの検索窓から「京都市役所」を検索して、目的の場所を表示します。

Googleマップ 埋め込み

次に地図内の表示範囲を決めるため、地図を拡大or縮小して、埋め込む地図の縮尺を決めます。

地図の表示範囲が大きいと、主要駅からの距離感や、地域内の位置関係がつかみやすくなります。

Googleマップ 縮尺変更

また、表示範囲を小さくすると、通りの名前やその付近の施設、駅からのアクセス方法がよくわかります。場所や目的に合わせて地図の縮尺を変更してください。

Googleマップ 縮尺変更

地図のhtmlコードを取得

続いて地図のhtmlコードを取得します。縮尺が決まったら「共有」ボタンをクリックします。

Googleマップ 埋め込み

上のタブから「地図を埋め込む」を選択します。

Googleマップ 地図の埋め込み

埋め込む地図が表示されるので、「HTMLをコピー」してください。縮尺はここでも変更可能です。CTRLキーを押しながらマウスホイール、または右下の + or – ボタンで変更します。

あと、地図内に「この地図は自分専用です」という説明が表示されますが、無視でOKです。表示範囲の確認で邪魔になるなら消しましょう。

Googleマップ 地図の埋め込み

HTMLコード左横から埋め込む地図のサイズを変更できます。サイズは「小 400 × 300」「中 600 × 450」「大 800 × 600」「カスタム」の4種類から選べます。

Googleマップ 埋め込みサイズ変更

カスタムサイズを選ぶと、地図のサイズを自分で指定できます。

Googleマップ 埋め込みサイズ変更

「実サイズでプレビュー」で、実際に表示される地図サイズを確認できます。

Googleマップ 埋め込みサイズプレビュー

スポンサーリンク

htmlコードを貼り付けて地図を表示

あとは表示させたいページに、Googleマップからコピーしたhtmlコードを貼り付けてください。

Googleマップ 埋め込みコード貼り付け

以下は実際にhtmlコードを貼り付けて、Googleマップの地図を表示させています。

Googleマップは多機能なので、この地図上で車や交通機関ごとにルートを検索したり、拡大地図の表示、この地図を自分のGoogleマップに保存することもできます。

Googleマップ ルート検索や保存

Googleマップ埋め込み まとめ

Googleマップの埋め込みはとても簡単で、表示させたい地図のhtmlコードをコピーして貼り付けるだけです。Googleマップの利用はもちろん無料、慣れれば埋め込みに1分もかかりません。

地図があれば会社やお店の場所がわかりやすくなります。ぜひGoogleマップを活用して、ホームページやブログに地図を埋め込んでみてください。

タイトルとURLをコピーしました