Google Mapsを英語で埋め込みたい

今サイトに埋め込んでいるGoogleマップの地図を英語にしたいということで、
いろいろ調べて私がつまずいたところを残しておきます。

参考

ほとんどはこちらのページで解決しました。

Google MapsをWebページに英語で埋め込む

その他

Google Maps Embed APIを使ってマップを表示する方法
GoogleMapの埋め込み表示はどうするべき？
サイト埋め込みGoogleマップが7月16日からAPIキー必須で有料に、ただし対応不要の場合も多いので慌てずに

Googleマップについて

いろいろ調べてわかったことは、

• 最近仕様が変わったらしい
• Googleマップから「地図を埋め込む」では英語に変更することはできなさそう
• 「Maps Embed API」というものを使えばできるらしい
• マップを表示するだけだったら無料らしい

普段、地図を埋め込む機会がなかったので、そもそもどうやって埋め込むのか埋め込み方法から探りました。
普通の時は、Googleマップのページから地図を埋め込むで問題ないそうです。

Maps Embed API

これがなんなのか、深くは理解していないが、まあ、Googleが定めた仕様なので、それにそって行えば良いと。

上記のサイトを参考に、APIキーを作成。
これ自体はそんなに難しくない。

つまずいたこと：埋め込みコードの書き方

理由1：私はGoogleマップの埋め込み作業に慣れていなかった
理由2：英語が読めない

これに該当しない人は多分つまずかないと思います・・・

こちらが公式のガイドです。
Maps Embed API Developer Guide

英語・・・翻訳してもなんとなくしかつかめなかった・・・

多分読めばわかるんだと思います。

こちらがサイトに載っている例です。

<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>

YOUR_API_KEYは、わかりましたが、
ん？表示したい住所はどうすればいいの・・・？

と、そこの部分がわからなくて調べていました。

結論から言うと、&q=から続く部分に表示したいものを表記すれば良いのです。
例えば、

<iframe
  width="600"
  height="450"
  frameborder="0" style="border:0"
  src="https://www.google.com/maps/embed/v1/place?key=YOUR_API_KEY
    &q=東京駅" allowfullscreen>
</iframe>

しかし、場所の名称から正確な地図が表示できない場合どうすればよいのか、私はそれが知りたかったのですが、そのまま住所を入れたら、私が欲しいものになりました。

<iframe
  width="600"
  height="450"
  frameborder="0" style="border:0"
  src="https://www.google.com/maps/embed/v1/place?key=YOUR_API_KEY
    &q=東京都千代田区丸の内１丁目９" allowfullscreen>
</iframe>

そして最後に、英語の表記に変更する場合、srcの末尾に&language=enを追加すれば完了です。

<iframe
  width="600"
  height="450"
  frameborder="0" style="border:0"
  src="https://www.google.com/maps/embed/v1/place?key=YOUR_API_KEY
    &q=東京都千代田区丸の内１丁目９&language=en" allowfullscreen>
</iframe>

お気づきだと思いますが、enの部分を変更すれば、他の言語にも対応できるそうです。

まとめ

もともとGoogleマップについての知識があれば、つまずかないようなところに私は引っかかってしまいました。。。

でもまあこれで、日本語が読めない人も安心して来られますね！