ホームページを制作する際にGoogleマップをアクセスマップとしてサイトに埋め込むことは多くあると思います。
住所などが決まっている場合はGoogleマップから直接埋め込みコードを取得して表示すればいいのですが、ページによって異なるGoogleマップを表示したい時に緯度や経度、住所情報からGoogleマップを表示する場合があります。
なので今回は緯度や経度、住所や名称を指定してGoogleマップを埋め込む時の方法を紹介します。
他にも方法は色々あるので参考までにどうぞ。
一般的にGoogleマップを埋め込むときは下記の手順で行います。
まずはGoogleマップへアクセスします。
検索から表示したい場所を検索します。
検索するとその場所が地図に表示されます。
検索の所にあるメニューをクリックします。
クリックすると横からメニューの内容が表示されるので
「地図を共有または埋め込む」をクリックします。
すると、別のウィンドウが表示されるので「地図を埋め込む」を選択して、
埋め込みコードをコピーします。
後はコピーした埋め込みコードをホームページに貼り付ければGoogleマップが表示されます。
緯度や経度などの情報でGoogleマップを表示したい場合、下記の方法で埋め込むことが可能です。
下記のURLのパラメーターに検索する情報を記載して埋め込みを行います。
http://maps.google.co.jp/maps?q=
例:「仙台駅」を指定したい場合↓
http://maps.google.co.jp/maps?q=仙台駅
実際に埋め込む際はiframeのsrcにURLを記述します。
1 2 3 |
<iframe src="http://maps.google.co.jp/maps?q=仙台駅&output=embed&t=m&z=16&hl=ja" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" width="600" height="450"></iframe> |
それぞれのパラメーターについて簡単に説明します。
「q=仙台駅」→検索する文字列(緯度・経度)
「output=embed」→出力
「t=m」→表示するモード(地図、航空写真、地形図など)
「z=16」→ズーム(縮尺)
「hl=ja」→言語(日本語、英語)
緯度・経度で指定する場合は下記のように記述します。
パラメーターに「q=緯度,経度」を指定しています。
1 2 3 |
<iframe src="http://maps.google.co.jp/maps?q=38.260123,140.882429&output=embed&t=m&z=16&hl=ja" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" width="600" height="450"></iframe> |
実際に「アド・エータイプ」を指定するとこのように表示されます。
1 2 3 |
<iframe src="http://maps.google.co.jp/maps?q=アド・エータイプ&output=embed&t=m&z=18&hl=ja" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" width="600" height="450"></iframe> |
今回はGoogleマップをホームページに埋め込む時の方法をご紹介しました。
緯度・経度、住所や名称でGoogleマップを表示したい場合に参考にしてみてください。
それでは。
ホームページに関するお悩みは、仙台のホームページ制作アド・エータイプにお任せください!