どうも、チャーさんです。
あなたは、グーグルマップの埋め込みは、
どうやってやればいいのか？
と疑問を持っていませんか。
この記事では、グーグルマップの埋め込みの、
方法をステップバイステップで書いています。
なので、あなたがこの記事を読めば、
グーグルマップの埋め込みができます。
ちなみに埋め込み地図のサイズ変更の仕方も書いてますので、
サイズ変更もできるようになります。
なので、あなたがグーグルマップの埋め込みを、
したいならばこのまま読んでみてください。
スポンサードサーチ
グーグルマップの埋め込み３ステップ
で、まず結論からいきます。
グーグルマップの埋め込みをするには、
以下の３ステップです。
- 普通にまず検索する
- 次に共有をおす
- iframeのタグをコピペ
この３点です。
というわけで補足していきます。
普通にまず検索する
グーグルマップの埋め込みをするには、
まずは普通に地図で表示したい場所を、
検索しましょう。
というのもグーグルマップの埋め込みをするには、
一度表示したい場所を検索する必要があるからです。
なので、
以下の画像のようにあなたが表示させたい場所を、
検索して表示させましょう。
例 東京駅
共有をおす
で次に、グーグルマップで表示させたい場所を、
検索して表示させたら、共有というボタンがあるので、
そこをクリックしましょう。
で、この共有というボタンをクリックし、
地図を埋め込むというのをクリックすると、
グーグルマップを埋め込みのタグが出力されます。
なので、共有をまずクリックしてください。
iframeのタグをコピペ
で共有をおして、上記をするとタグが出てきます。
このiframeから始まるタグを全てコピーしてください。
ちなみにこのタグがグーグルマップを表示するための、
タグになります。
なので、コピーしたあとは、
あなたのサイトやwebページ上で、
表示させたい場所にこのタグをコピペしてください。
ワードプレスですと、
テキストエディタの中に記述しましょう。
例 ワードプレスのテキストエディタに記述
すると、記述をコピペした場所に、
グーグルマップが表示され、
埋め込み成功になります。
ちなみに参考になればと、
僕のサイトに埋め込みをしてみました。
例 東京駅 埋め込み
で、こんな風に、
- 普通にまず検索する
- 次に共有をおす
- iframeのタグをコピペ
をすればグーグルマップの埋め込みは完了です。
スポンサードサーチ
グーグルマップ埋め込みのサイズ変更の方法
で、このグーグルマップの埋め込みですが、
地図のサイズをあなた自身で自由に変えれます。
やり方は、コピペしたiframeのタグの中にある、
widthという場所と、heightという場所の数字を、
変えてください。
上記画像でいうと、下から３行目の、
右側にあるやつです。
こちらの数字を大きくすると、画面が大きくなり、
数字を小さくすると、埋め込み地図の画面が、
小さくなります。
ちなみにwidth=”100%”
とかも可能でして、そう指定すると、
親要素の横幅いっぱいまで広がってくれます。
なので、埋め込み時に、
サイズも変更したい場合は、
活用してください。
スポンサードサーチ
まとめ
それではまとめに入ります。
グーグルマップの埋め込みをするには、
- 普通にまず検索する
- 次に共有をおす
- iframeのタグをコピペ
この３点をやればokでして、
割と簡単にできるようになってるので、
あなたのページにも埋め込みを試してみてください。
それでは、読んでもらってありがとうございました。
チャーさん
