まず、普通に設置した場合はこちら。
通常通りに共有ボタンから埋め込みコードを取得して貼り付けています。特別なことはしていませんが、widthとheightをCSS側で指定しています。

デモ

左のポップを非表示にしたものがこちら。
htmlはまったく変えずに、CSSの調整のみでポップを出なくしています。

デモ

<div id="map">
<iframe src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d12958.627135224153!2d139.8107004!3d35.7100627!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0x7d1d4fb31f43f72a!2z5p2x5Lqs44K544Kr44Kk44OE44Oq44O8!5e0!3m2!1sja!2sjp!4v1592969771062!5m2!1sja!2sjp" frameborder="0" style="border:0;" allowfullscreen="" aria-hidden="false" tabindex="0"></iframe>
</div>

htmlは、コピーしてきた埋め込みコードをdiv#mapで囲んでいるだけです。

#map {
  width: 100%;
  height: 500px;
  overflow: hidden;
}

#map iframe {
  width: 100%;
  height: 860px;
  margin-top: -170px;
}

CSSは、#mapに実寸サイズを指定し、overflow: hidden;で枠からはみ出た要素を非表示にしておきます。
iframeの指定は、実寸よりも大きいサイズを設定して、左のポップ分margin-top（ネガティブマージン）で要素を上にずらしています。各サイズについては、要素を見ながら調整していくのが良さそうです。

ちなみに、スマホの場合はこんな感じに設定しました。

#map {
  width: 100%;
  height: 250px;
  overflow: hidden;
}

#map iframe {
  width: 100%;
  height: 600px;
  margin-top: -150px;
}

実装自体はとても単純で簡単にできます。アイディア次第でうまく調整できる例ですね。とても勉強になりました。

Google Mapの左上のポップ、枠、吹き出しを消す - いろんなことの備忘録

Google Mapの左上の表示がいらない時、邪魔な時の対処法です 消すというよりは見えなくするようです 以下のコードをコピペしてください

http://tamsaaan.hatenablog.com/entry/2015/08/02/184546