ホームページにGoogleMapを埋め込む方法

ホームページに地図を載せたい場合、地図を画像で作成すると手間がかかってしまいます。
そんな時はGoogleMapを挿入するようにしましょう。

2014年2月20日からグーグルマップは新バージョンへ移行し始めました。
GoogleMapをサイトへ埋め込む方法は新バージョンのGoogleMapと旧バージョンのGoogleMapとでは違うのでその方法を紹介します。

GoogleMapをサイトに埋め込む手順

はじめにサイトにのせたい住所や場所を左上のフォームで検索します。今回の場合は例として「東京駅」の地図をサイトに埋め込むことにします。

3

フォームに「東京駅」と入力し、検索ボタンをクリックすると画面中央にピンが表示されます。ピンの部分が「東京駅」です。

21

画面右下に歯車のマークがあるので、歯車のマークをクリックします。

12

“地図を共有/埋め込む”をクリックします。

4

画面中央に小さいウィンドウが表示されるので、”地図を埋め込む”タブをクリックします。

32

赤枠内のiframeから続く文字列をコピーします。この文字列をサイト内にGoogleMapを表示されたい箇所に貼りつけることでGoogleMapを表示させることができるようになります。

GoogleMapを任意の大きさでサイトに埋め込む方法

赤枠内のiframeから続く文字列の左側に中を選択しているボタンがあります。これをクリックすると”カスタムサイズ”という選択肢が表示されますので、ここで”カスタムサイズ”を選択します。”カスタムサイズ”を表示すると地図の縦と横のサイズを指定する画面が表示されるので、ここで任意のサイズを入力します。

5

最後にiframeから続く文字列をコピーし、それをサイトでGoogleMapを表示されたい箇所に貼りつけることでカスタムサイズのGoogleMapを表示させることができるようになります。

  • このエントリーをはてなブックマークに追加