ウェブサイトのデザインをしていて
iframeで埋め込みしたGoogle Mapのネームカード（グーグルマップの左上に表示されるアレ）を消したい…
そもそもアレは消せるのか？と思い調べてみましたら
CSSのoverflow: hiddenで簡単に消すことができました。

ついでにオリジナルのネームカードに変えてみました！

デモページは、こちら

↓以下が実際のソースサンプルです。

▼HTML

    <div class="map-top">
        <div class="google-map">
           <iframe id="map"
              src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3281.101796963052!2d135.51260187622515!3d34.67738018446286!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x6000e73a1d2cd66d%3A0xf9e84c1daa9ae735!2zKOagqinjgr_jgqvjg6TjgrPjg5_jg6Xjg4vjgrHjg7zjgrfjg6fjg7Pjgro!5e0!3m2!1sja!2sjp!4v1712031130449!5m2!1sja!2sjp"
              width="1200" height="450" style="border:0;" allowfullscreen="" loading="lazy"
              referrerpolicy="no-referrer-when-downgrade"></iframe>
        </div>
  
        <div class="map-data">
           <p class="map-data-title">株式会社タカヤコミュニケーションズ</p>
           <dl>
              <dt>所在地</dt>
              <dd>
                 <span style="display : inline-block">〒540-0015 大阪府大阪市中央区十二軒町6-5F</span><span
                    style="display : inline-block">EXエリアV55ビル 2</span>
              </dd>
              <dt>電話番号</dt>
              <dd>06-6762-8145</dd>
           </dl>
           <p class="map-data-link">
              <a target="_blank" href="https://maps.app.goo.gl/F4aTAzeiZxEb5NDP6">Google
                 Mapで見る<span class="material-icons">map</span></a>
           </p>
        </div>
     </div>

▼CSS

/* --------------------

ネームカードを消す

--------------------*/

.google-map {
   height: 500px;
   margin-right: calc(50% - 50vw);
   margin-left: calc(50% - 50vw);
   overflow: hidden;
}

.google-map iframe {
   height: 860px;
   margin-top: -170px;
}

/* --------------------

自作のネームカードを表示させる

--------------------*/

.map-top {
   position: relative;
}

.map-data {
   position: absolute;
   top: 40px;
   left: 40px;
   width: 400px;
   margin: auto;
   padding: 40px 50px;
   border: double 5px #eeeeee;
   background: #ffffff;
   font-size: 1em;
   font-family: "Kaisei Opti", serif;
   font-weight: 400;
   font-style: normal;
   line-height: 2;
   z-index: 999999;
}

.map-data-title {
   position: relative;
   margin: 0 0 1.5rem 0;
   font-size: 1.2em;
}

.map-data dl {
   display: flex;
   flex-wrap: wrap;
   justify-content: flex-start;
}

.map-data dl dt {
   width: 20%;
   margin-right: 20px;
}

.map-data dl dd {
   width: 50%;
}

今回、参考にさせていただいたのは、
『【Google Map】ネームカードの削除とマップ上に会社情報を表示』さんです。
ありがとうございます。