サイト制作では毎度のように使うGoogleマップを埋め込む方法をメモします。
正直2～3回やったら覚えてしまうのですが、よく使うので残しておきます。
今回は試しにあのランドの地図でやってみることにします。
マップの色を変更したい！と思った方は、こちらの記事も見てみてください↓
手順
目的地を検索して地図を表示して「共有」をクリック
まずはGoogleマップで目的地を検索しましょう。
概要タブにある「共有」をクリックします。
「地図を埋め込む」から「HTMLをコピー」
「共有」をクリックするとモーダルが表示されます。
今回は地図をhtmlで埋め込みたいので、「地図を埋め込む」をクリックします。
モーダルが切り替わります。
「HTMLをコピー」をクリックするとiframeタグがクリップボードにコピーされます。
htmlに貼り付け
コピーしたコードをhtmlに貼り付けます。
あとはcssで表示を調整すればOKです。
See the Pen Googleマップをhtmlで埋め込む_demo by mumemo (@moe-ura) on CodePen.
高頻度で使うので覚えておこう！