サイトにgoogleマップ30秒で埋め込む方法

3315 ワード
HTML5 GoogleMap HTML5 テキストリンク

この記事の対象者

・独学でウェブ開発の勉強をしていて、Google mapを埋め込んで見たと思ったけど、難しくてよく分からない人
・サイト内で目的地までの地図を示した人

google mapの埋め込みは簡単

自分も始めはGoogle Maps APIを使って地図を表示させようとしていましたが手間が多すぎるのでおすすめしません。そこで、もっと簡単な方法でGoogle Mapを埋め込めないか調べた所簡単な方法を見つけたので紹介します。
※自分が見た限りページに埋め込むだけなら商業利用でも問題はないと思います

google mapを埋め込もう

まずは、google mapと検索してmapを開く。
次に自分のページに乗せたい場所を検索して
（今回は例なので適当にNIMSと検索しました特に意味は無いです。）
共有の左から5番目にある共有をクリックして、さらに地図を埋め込むを埋め込むをクリック

そうすると、こん感じの画面が出るのでHTMLにコピーを押して下さい。
最後にこれをhtmlの任意の場所に貼り付けて完成です。
何もいじっていないhtmlに貼り付けるとこんな感じになります。

コード

<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>

<body>
    <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d25792.406650459066!2d140.10625505215506!3d36.09224890527196!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x60220cc2a33e07a3%3A0x7c1de3ba4bdf8e2a!2z5Zu956uL56CU56m26ZaL55m65rOV5Lq654mp6LOq44O75p2Q5paZ56CU56m25qmf5qeL77yITklNU--8ieWNg-ePvuWcsOWMug!5e0!3m2!1sja!2sjp!4v1597760967057!5m2!1sja!2sjp" width="600" height="450" frameborder="0" style="border:0;" allowfullscreen="" aria-hidden="false" tabindex="0"></iframe>
</body>

</html>

ちなみに最後らへんにあるwidthやheightの値をいじる事で大きさをいじる事も出来るらしいです。

終わりに

最後まで記事をご覧いただきありがとうございました。
他の記事でもこれ違うだろなどと思った方がいたら遠慮せずにコメントをくれたら嬉しいです。
今回参考にさせてもらったサイト