APIキー不要の無料版Googleマップで多言語の地図を埋め込む方法

今やホームページ制作には欠かせないGoogleマップ。実はこのGoogleマップ、無料で使えるタイプ(以降無料版)と一定の表示回数を超えると課金されるタイプ(以降有料版)の2種類があるのをご存知でしたか?

有料版はマーカー(ピン)をオリジナルのロゴ画像に変えたり、ホームページの配色に合わせて地図内の色味を細かく変更したり、検索ボックスを設置したりと様々なカスタマイズが可能です。

これらの機能を使うには予めGoogle Maps PlatformからAPIキーを取得してGoogleマップと紐付けし、また、万が一課金が発生した際の決済用にクレジットカード情報の登録も必要になります。

最近の弊社の案件では、ずっと有料版を使っていたので気付かなかったのですが、それまで無料版だと不可能だと思ってた「多言語マップの埋め込み」がいつの間にか簡単にできるようになっていました。

いつ頃アップデートされたのか、ちょっと調べた感じでは分からなかったのですが(少なくとも数年前まではこの機能はなかったはず…、いや、自分がただの情弱だっただけ?笑)、ホームページの制作案件に多言語対応は結構ありますので、今回は無料版での埋め込み方法について解説したいと思います。

目次

  1. Googleマップにアクセスする
  2. Googleマップでマーキングしたい施設や物件を検索する
  3. Googleマップ埋め込み用のHTMLを取得する
  4. コピーしたHTMLを貼り付けて地図を埋め込む
  5. 多言語版のGoogleマップを埋め込む
  6. 《おまけ》無料版Googleマップの色味をグレースケールに変更する

1.Googleマップにアクセスする

まず、以下からGoogleマップにアクセスします。
https://www.google.co.jp/maps

2.Googleマップでマーキングしたい施設や物件を検索する

マーキングしたい施設や物件を検索する

Googleマップページの左上にある検索フィールドにマーキングしたい施設名や会社名、ショップ名、もしくはそれらの電話番号、住所等を入力して検索します。
ここでは横浜みなとみらいのレストラン「ハードロックカフェ 横浜」で検索してみました。

3.Googleマップ埋め込み用のHTMLを取得する

サイドパネルの共有ボタンをクリック

マップ内に「ハードロックカフェ 横浜」のマーカーが立っているのを確認したら、まずは日本語のGoogleマップを埋め込んでみましょう。サイドパネルから「共有」ボタンをクリックします。

地図を埋め込むをクリックする

「共有」のモーダルウィンドウが表示されますので、上部メニューの「地図を埋め込む」をクリックします。

HTMLをコピーをクリックする

「地図を埋め込む」画面に切り替わりますので、右上にある「HTMLをコピー」をクリックします。
なお左端に地図の大きさを指定できるセレクトメニューがあり、デフォルトのサイズは「中」サイズになっています。参考までに選択できるサイズは以下のとおりです。

  • 小 ⇒ 横400px 縦300px
  • 中 ⇒ 横600px 縦450px
  • 大 ⇒ 横800px 縦600px
  • カスタム ⇒ 縦横とも任意のピクセルで指定が可能

※サイズについては後からCSSで調整可能なので、ここではデフォルトの「中」サイズのままでコピーします。

4.コピーしたHTMLを貼り付けて地図を埋め込む

コピーしたHTMLコード<iframe></iframe>をエディタにペーストしてGoogleマップを埋め込みます。上の地図はWordPressのテキストエディタにそのままペーストした状態のものです。PC版だと右側の余白が気になるので縦は450pxのまま横幅だけ100%の相対サイズに変更し、スマートデバイスにも対応しておきましょう。
HTMLとCSSは以下のとおりです。

<p class="google-maps">
<iframe src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d3249.9600522897413!2d139.6308561!3d35.4557834!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x60185c5cfe967fc1%3A0x3e90008a301702ec!2zSGFyZCBSb2NrIENhZmUgWW9rb2hhbWEo44OP44O844OJ44Ot44OD44Kv44Kr44OV44KnIOaoqua1nCk!5e0!3m2!1sja!2sjp!4v1568653849052!5m2!1sja!2sjp" width="600" height="450" frameborder="0" style="border:0;" allowfullscreen=""></iframe>
</p>
.google-maps iframe {
width: 100%;
}

これでカラムの横幅に常時フィットする日本語版Googleマップの埋め込みが完了です。

5.多言語版のGoogleマップを埋め込む

ハンバーガーメニューをクリック

引き続き、今回のテーマでもある多言語版のGoogleマップを埋め込んでみます。上記ステップの「2.」の手順まで遡り、マップ内に「ハードロックカフェ 横浜」のマーカーが立っているのを確認後、検索フィールド左端のハンバーガーメニューをクリックします。

言語をクリック

表示されたメニューから「言語」をクリックします。

言語を選択ウィンドウでEnglish(United States)を選択

「言語を選択」ウィンドウが立ち上がり、表示可能な言語一覧が表示されています。今回は英語に変更したいので「English(United States)」をクリックします。

Shareボタンをクリック

これで英語表記のマップに変更されます。なお、変更と同時にメニューやパネル表記もその言語に変わりますが、埋め込む手順は日本語版と全く同じです。最初にサイドパネルの「Share」ボタンをクリックします。

「Embed a map」を選択して「COPY HTML」をクリック

さらに「Share」ウィンドウの「Embed a map」を選択して「COPY HTML」をクリックし、先のHTMLの<iframe></iframe>の部分をコピーした英語版のHTMLで上書きすれば完成です。

<p class="google-maps">
<iframe src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d3249.9600522897413!2d139.6308561!3d35.4557834!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x60185c5cfe967fc1%3A0x3e90008a301702ec!2sHard%20Rock%20Cafe!5e0!3m2!1sen!2sjp!4v1568656332884!5m2!1sen!2sjp" width="600" height="450" frameborder="0" style="border:0;" allowfullscreen=""></iframe>
</p>

無事に無料版Googleマップで英語表記の埋め込みが完了しました。

6.《おまけ》無料版Googleマップの色味をグレースケールに変更する

最後におまけとして、無料版Googleマップの色味をグレースケールに変更する方法をご紹介します。

<p class="google-maps gray">
<iframe src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d3249.9600522897413!2d139.6308561!3d35.4557834!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x60185c5cfe967fc1%3A0x3e90008a301702ec!2z7ZWY65Oc65297Lm07Y6YIOyalOy9lO2VmOuniA!5e0!3m2!1sko!2sjp!4v1568662805550!5m2!1sko!2sjp" width="600" height="450" frameborder="0" style="border:0;" allowfullscreen=""></iframe>
</p>
.google-maps.gray iframe {
width: 100%;
-webkit-filter: grayscale(0.9);
filter: grayscale(0.9);
}

言語は韓国語に変更してあります。グレースケール化はCSSの「filter」プロパティに「grayscale」フィルターを適用して実現しています。有料版のように各要素ごとの細かい色指定はできませんが、サイトカラーによっては無彩色の方が馴染むケースもありますので、TIPSの一つとして覚えておいて損はないかと思います。
※ただし、IE11には対応してませんので使用する際はご注意ください。

Share!