当記事では グーグルマップ(Googlemap)をブログやWebサイトに埋め込むやり方を解説していきます。
どんな時に効果的なのでしょうか？
例えば2つ例を書きます。
- ブログであなたが紹介したいお店や観光スポットの場所をシェアしたい
- Webサイトを作成している方は所在地や住所の地図を載せたい
結構、あてはまる人多いと思うんです。
ブログを始めた方は特にわからないことだらけのはず。
そんな方でも簡単に貼り付けできるので、是非この記事を通して習得してくださいね！
それでは、手順を説明していきます。
手順１
ここでは、あなたが載せたいお店を検索します。
まずグーグルマップにアクセスしましょう。
左上の検索画面であなたが貼り付けたい場所の情報を入力しましょう。
今回は、私が大好きなマレーシアで夜景を楽しめる「ヘリラウンジバー」を例に取り上げてみました。
画面左上の検索画面より入力します。
私のようにざっくりとエリアとお店の名前で調べることもできますが、電話番号・住所など入れて調べることも可能です。
そうすると、地図上（画面右）に赤いピンが刺さって「Heli Lounge Bar」と書かれていることが確認できます。
手順２
次に埋め込む地図のコードの準備です。
まず、写真の「③ここをクリックしましょう！」とあります、「共有」をクリックしてください。
そうすると右の写真の「共有」画面がでてきますよね？
この上段の「地図を埋め込む」をクリックしてください。
手順3
最後に埋め込む地図のコード取得です。
手順2の最後で「地図を埋め込む」をクリックしてもらった画面では写真のような画面になっていると思います。
ここでは、地図コード取得する最後の手順となり、ブログやWebに張り付ける地図情報の大きさと表示する地図を近づけたり、遠ざけたり調整後、コードを取得します。
手順3-1 地図情報の大きさ
以下4件より選択することができます。
- 「小」…横：400px 縦：300px
- 「中」…横：600px 縦：450px
- 「大」…横：800px 縦：600px
- 「カスタムサイズ」…自由に数字を入力
個人的な感想としては、使用するサイズは「中」がベストと考えます。
「小」サイズは小さくピンが刺さっているのか見えないことが多いですのでブログに張り付けるにはお勧めできません。
「大」サイズはスマホで表示したときに地図が邪魔になってスクロールしずらいといった問題もあります。
最後に「カスタマイズ」です。自由に数字を入力できますので、メリットが高いのですが、毎回設定するわずらわしさを考えると少しマイナス評価です。
手順3-2 ズーム機能
右下にある「＋」「ー」を利用して表示された地図を近づけたり、遠ざけたりすることが可能です。
手順3-3 埋め込みコードの取得
地図の表記サイズとズームレベルを選択したらさきほどの写真のように「埋め込みコード」をコピーします。
やり方は「HTMLをコピー」をクリックするだけです。
今回取得したコードは以下です。
<iframe src=”https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3983.785220604597!2d101.70774314950275!3d3.1512732540091224!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x31cc362b2b71395d%3A0xb198401a7000b9a5!2sHeli%20Lounge%20Bar!5e0!3m2!1sja!2sjp!4v1567833219367!5m2!1sja!2sjp” width=”600″ height=”450″ frameborder=”0″ style=”border:0;” allowfullscreen=””></iframe>
手順4 コードをブログに貼り付けましょう
上記のコピーしたコードをサイトやブログのHTMLにペーストします。
そして「プレビュー」を押せば無事にGoogleマップを埋め込むことができました。
いかがでしたでしょうか？思ったより簡単にできますよね？
是非、ご活用ください！
コメントを残す