【CSS】Google マップの左上のクチコミ部分を消す方法

• お客様から、Google マップの「左上のクチコミ部分を消せますか？」とお願いされた。
  
• CSSの「display: none;」で消せないし、どうすればいいのだろう…。

こんな悩みを解決できる記事を書きました。

この記事を書いている僕は、フリーランスエンジニアとして働き、これまで50件以上のホームページ制作に携わらして頂いております。

Google マップの左上のクチコミ部分を消す方法

上記の画像の赤枠部分を消していきます！（正確には、ずらして見えなくする）

まず、Google マップの左上のクチコミ部分を消すためのコードは以下になります。

HTML（index.html）

<div class="google-maps">
  <iframe src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d1619.8145460367582!2d139.809268!3d35.710744!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0x7d1d4fb31f43f72a!2z5p2x5Lqs44K544Kr44Kk44OE44Oq44O8!5e0!3m2!1sja!2sjp!4v1660126421408!5m2!1sja!2sjp" width="800" height="600" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
</div>

CSS（style.css）

.google-maps {
  position: relative;
  overflow-y: hidden;
  width: 100%;
  padding-top: 75%;
}

.google-maps iframe {
  position: absolute;
  top: -150px;
  left: 0;
  width: 100%;
  height: calc(100% + (150px * 2));
}

【解説】Google マップの左上のクチコミ部分を消す方法

HTML（index.html）

<div class="google-maps">
  <iframe src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d1619.8145460367582!2d139.809268!3d35.710744!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0x7d1d4fb31f43f72a!2z5p2x5Lqs44K544Kr44Kk44OE44Oq44O8!5e0!3m2!1sja!2sjp!4v1660126421408!5m2!1sja!2sjp" width="800" height="600" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
</div>

まず、HTML（index.html）ですが、特に説明は不要かと思います。

アスペクト比 4:3で、Google マップを埋め込みたいため、【 iframe 】タグを【 div 】タグで囲んであげます。

CSS（style.css）

.google-maps {
  position: relative;
  width: 100%;
  /* アスペクト比 4:3 */
  padding-top: 75%;
}

.google-maps iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

続いて、一番重要なCSS（style.css）の部分です。

まずは、アスペクト比 4:3で、Google マップを埋め込むための基準のコードになります。

・「アスペクト比 4:3で、Google マッをプ埋め込むって何？」

・「【 padding-top: 75%; 】って何？」

という方は、以下の記事が参考になります。

【CSS】Google Mapの比率を保持しながらレスポンシブで埋め込む方法

.google-maps {
  position: relative;
  overflow-y: hidden;
  width: 100%;
  padding-top: 75%;
}

.google-maps iframe {
  position: absolute;
  top: -150px;
  left: 0;
  width: 100%;
  height: calc(100% + (150px * 2));
}

次に、クチコミ部分を消すために必要な記述を書いたコードになります。

.google-maps {
  position: relative;

  /* はみ出した部分を切り取る */
  overflow-y: hidden;

  width: 100%;
  padding-top: 75%;
}

.google-maps iframe {
  position: absolute;

  /* クチコミ部分の高さ分、Google マップを上にずらす */
  top: -150px;

  left: 0;
  width: 100%;

  /*
    「Google マップを上にずらした分（例: 150px） × 2」
    Google マップ自体の高さを広げてあげます

    *「×2」をしてあげないと、赤色のマップピンが上側にずれます
  */
  height: calc(100% + (150px * 2));
}

重要な箇所は、コメントアウトしております！

Google マップを上にずらして、クチコミ部分を消して、Google マップの高さを「上にずらした分 × 2」広げてあげます。

【 overflow-y: hidden; 】で、ずらした分を切り取ることを忘れないようにしてください。

これで、Google マップのクチコミ部分を消すことができました！

ニッチな内容ですが、このようにして「Google マップのクチコミ部分」を消すことができるため、覚えておくと便利かと思います。

今回は以上です。