Google マップの共有を使う
Webサイトに地図を表示したいだけならば、Google マップが提供しているHTMLソースコードをコピペする方法が手っ取り早いです:)。手順と、地図の大きさの調整の仕方をまとめました。
Google マップを埋め込む
まずはPCから、Google マップで、目的地を検索します。検索した時の左のメニューから、「共有」の「地図を埋め込む」で提供されているHTMLをコピーして、WebサイトのHTML内の、地図を配置したい箇所にペーストします。
<iframe src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d3241.5849198000546!2d139.7006604!3d35.662597!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x60188ca6354186e3%3A0x8f3e73a7e5e82a88!2z5riL6LC344Kt44Oj44K544OI!5e0!3m2!1sja!2sjp!4v1541423541726" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>表示される地図には、その施設の情報や、Googleでログインしているアカウントのアイコンが表示されていたり、施設の情報ウィンドウ内の「ルート」から直接Google マップのルート案内にリンクできたり、Google マップのほとんどの機能を享受できちゃう内容となっています。
ただし、コピペしたままだと、地図のサイズが固定されてるので、表示したいエリアよりも小さいと余白ができちゃうし、大きいとハミ出しちゃって大変ですね。地図のサイズは、HTMLソースコードのwidth属性とheight属性の値を変更すれば、任意のサイズを指定できます（単位は書かずに数値だけ入力します）。
例えば、width属性の値を800、height属性の値を200と指定すれば、横幅800px、高さ200pxのサイズで地図が表示されるという具合。
<iframe src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d3241.5849198000546!2d139.7006604!3d35.662597!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x60188ca6354186e3%3A0x8f3e73a7e5e82a88!2z5riL6LC344Kt44Oj44K544OI!5e0!3m2!1sja!2sjp!4v1541423541726" width="800" height="200" frameborder="0" style="border:0" allowfullscreen></iframe>これで、広い画面で見た時にはエリア内にしっかり収まるようになりました。けれど、スマホで見た時には結局ハミ出しちゃいますね…:(。
いかなるときも、表示するエリアにぴったりフィットさせるには、以下のように、width/height属性は削除して、style属性の値border:0の手前に、width:100%;とheight:100%;とvertical-align:middle;を追記します。
<iframe src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d3241.5849198000546!2d139.7006604!3d35.662597!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x60188ca6354186e3%3A0x8f3e73a7e5e82a88!2z5riL6LC344Kt44Oj44K544OI!5e0!3m2!1sja!2sjp!4v1541423541726" frameborder="0" style="width:100%;height:100%;vertical-align:middle;border:0" allowfullscreen></iframe>これで、表示したいエリアのサイズがどう変わっても、エリアのサイズに合わせて地図がみっちり表示されるようになりました;D。