htmlのみを編集して、Googleマップをiframeを使ってサイトに埋め込みたい

現在、Wix.comを使った小規模サイトの制作に取り組んでおります。
サイトの中に、Googleマップを埋め込みたいのですが、このWix.comはcssをカスタマイズ出来ないため、編集できるのはiframeのhtmlコードのみになります。

この状況で、PCで見てもスマホで見ても、適切な幅でGoogleマップを表示させたいのですが、可能でしょうか？教えていただけると幸いです。よろしくお願いいたします。

行動規範の内容に同意します

回答1件

Google がいくつか Web API を提供しており、iframeタグのみでマップを埋め込みできる Google Maps Embed API
や、画像を生成できる Google Static Maps API であれば、CSS や JavaScript の必要がなく、Google API キーの発行のみで表示ができます。

Google Static Maps 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]">

パラメータを変更することで、任意の緯度経度、ズームレベル、サイズでマップ画像が表示でき、マーカーも表示できます。
詳しくはこちらのドキュメントを見てみてください。

Google Maps Embed API

画像としてではなく、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>

コードはこちらで作成もできますので、よく分からない方でも簡単に埋め込みができるかと思います。

少しでもお力になれば幸いです。

投稿2017/05/08 13:18

編集2017/05/08 13:24