Google がいくつか Web API を提供しており、iframeタグのみでマップを埋め込みできる Google Maps Embed API
や、画像を生成できる Google Static Maps API であれば、CSS や JavaScript の必要がなく、Google API キーの発行のみで表示ができます。
Google Static Maps APIであれば、下記のコードだけでマップ表示が可能です。
html
1<img src="https://maps.googleapis.com/maps/api/staticmap?center=Brooklyn+Bridge,New+York,NY&zoom=13&size=600x300&maptype=roadmap
2&markers=color:blue%7Clabel:S%7C40.702147,-74.015794&markers=color:green%7Clabel:G%7C40.711614,-74.012318
3&markers=color:red%7Clabel:C%7C40.718217,-73.998284
4&key=[YOUR_API_KEY]">
パラメータを変更することで、任意の緯度経度、ズームレベル、サイズでマップ画像が表示でき、マーカーも表示できます。
詳しくはこちらのドキュメントを見てみてください。
画像としてではなく、iframe でマップを埋め込みたいのであればGoogle Maps Embed APIが利用できます。
<iframe
width="600"
height="450"
frameborder="0" style="border:0"
src="https://www.google.com/maps/embed/v1/place?key=[YOUR_API_KEY]
&q=Space+Needle,Seattle+WA" allowfullscreen>
</iframe>
コードはこちらで作成もできますので、よく分からない方でも簡単に埋め込みができるかと思います。
少しでもお力になれば幸いです。
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。