サイトにGooglemapを埋め込む

3446 ワード
scss haml scss テキストリンク

■ はじめに

タイトルについて記事にしました。
この記事で得る内容は以下の通りです。

・CSSの基礎知識が増える
・サイトにGooglemapを埋め込む方法

■ 手順

・ まず、サイトに載せたい地図をググります

・ 検索結果画面右にある地図をクリックします

・ 共有をクリックします

・ 共有をクリックすると、モーダルが表示されますので、地図を埋め込むをクリックします

・ HTMLをコピーをクリックします

・ 自分はhamlを使っていますので、ここで変換して

・ ロケット記法から:に書き換えて

index.haml
%iframe{allowfullscreen: "", "aria-hidden": "false", frameborder: "0", height: "450", src: "https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d12964.445925063472!2d139.7169535!3d35.6742569!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0xf8fe5cab0f97a8d8!2z5piO5rK756We5a6u6YeO55CD5aC0!5e0!3m2!1sja!2sjp!4v1604800490948!5m2!1sja!2sjp", style: "border:0;", tabindex: "0", width: "600"}

・ 最低限、高さと幅を調整して

index.scss
    // 中略
    iframe {
      height: 100%;
      width: 100%;
    }

この様にサイトにGooglemapを埋め込むことができます