Googleマップのホームページ埋め込み方法！ルート・複数店舗の表示は無料？

Googleマップで取得した地図情報は無料で簡単にホームページやウェブサイトに埋め込み表示することができます。自分の会社や店舗のほかに、イベントで使用する会場の地図を表示させれば宣伝効果も高まります。ここでは、地図情報のHTMLタグの取得方法や、タグを埋め込む方法、実際に埋め込んだ時の表示のされ方などを紹介します。

Googleマップを使えば自分のホームページやウェブサイトに会社や店舗の地図を表示させることができます。
具体的な方法としては、Googleマップから地図情報のタグを取得し、テキストとして書き込むことでホームページに地図が表示されます。無料で簡単にできる方法をこれから紹介します。下の画像は新宿駅の地図を実際に表示してみたものです。

まずはGoogleマップで埋め込みたい地図を表示しましょう。
検索で住所や店舗などの名前を入力すればその位置に移動し、赤いピンが立ちます。
地図上の建物などの名前をクリックすることでもピンを立てられます。
これで地図情報を取得できました。

地図情報を取得した状態で、Googleマップ左上の端にあるメニューをクリックします。
「地図を共有または埋め込む」という項目があるので、これをクリック。

「共有」のウィンドウが表示されて、「リンクを送信する」と「地図を埋め込む」という二つの項目が表示されます。「地図を埋め込む」を選択するとHTMLタグを取得できるので、このタグをコピーします。

「この地図は自分専用です」という表示は気にしなくても大丈夫です。ウェブ上で公開すればほかの人も同じように地図が表示されます。

地図を埋め込みたいホームページを用意します。HTMLタグを入力するので見たままの編集モードだけでなく、HTMLを入力できるモードが必要です。

先ほどコピーしたHTMLタグをHTML編集モードでペーストしてください。プレビューで確認してみてちゃんと表示されていれば問題ありません。タグがそのまま表示されてしまう場合は、HTMLとして入力されていない場合があります。下の画像は新宿駅の地図情報を取得した時のHTMLタグです。

こんどは渋谷駅を表示してみました。地図の埋め込みは自分の会社や店舗だけでなく、イベントを開催したり参加する際に、来場者の方に知らせる場合も役立ちます。

先ほどの埋め込んだ渋谷の地図を、Chromeの画面サイズをスマホサイズに変更して表示してみました。埋め込んだ地図はスマホの画面に合わせて自動で最適化されるのでホームページ上で問題なく表示されています。
パソコンだけでなくスマホでも同様に表示されるので安心です。店舗などの場所を表すピンもしっかり表示されています。

次に先ほどの埋め込み方法から応用した埋め込みの方法を紹介します。店舗への最寄駅からのルートを表示して埋め込む方法と、複数のテンポを一つの地図に同時に表示させて埋め込む方法です。このどちらもホームページに無料で埋め込むことができます。

店舗などへの地図上にルートを表示させるには、まず「Googleマイマップ」にアクセスしましょう。
アクセスすると画面上部に「+新しい地図を作成」というボタンがあるのでクリックします。

ボタンを押すと日本全体の地図が表示されます。
この地図は「無題の地図」という名前になっているので任意の分かりやすい名前に変更しましょう。
この名前は共有したひとにも表示されるので「店舗への道のり」「店舗への行き方」「店舗へのルート(アクセス)」などの名前が良いでしょう。

次に右上の検索窓でルートを作りたい場所を検索します。
ルートを作成したい店舗などの位置に画面が移動しウィンドウが表示されます。
「+地図に追加」をクリックします。

「+地図に追加」で自分が作成した新しい地図に店舗などが追加されました。
追加をすると、ウィンドウの下にペンキや鉛筆、カメラなどのアイコンが表示されるようになります。
その中の矢印アイコンが「ここまでのルートを表示」のボタンです。

「ここまでのルートを表示」 をクリックすると、左のウィンドウにルートの詳細欄が表示されます。
移動手段は車、自転車、徒歩から選択可能。
Aはルート開始地点、Bはルート終着地点(先ほど追加した店舗)です。

分かりやすいように、池袋駅を出発地点(A)としてサンシャイン水族館を終着地点(B)として設定しました。
AとBの欄はクリックするとテキストを入力できて、予測した結果が下に表示されます。

ルートがしっかり表示されたのでこれで完成です。
後は左のウィンドウの真ん中にある「共有」を押してリンクの共有をONにすれば公開されます。
GmailやツイッターなどのSNSでリンクを共有できて、埋め込みのHTMLタグをコピペすれば先ほどと同じようにホームページに埋め込むこともできます。

次はGoogleマップに複数店舗を同時に表示したものをホームページに埋め込む方法を紹介します。
途中までは先ほどのルート表示と一緒です。
「Googleマイマップ」 で新しい地図を作成します。
新宿には映画館がたくさんあるので、「新宿の映画館」という映画館紹介の地図を作成するとします。

検索窓を使って新宿の映画館を検索して地図に追加していきます。
バルト9やピカデリー、TOHOシネマズ、シネマカリテを追加していきます。

まだまだたくさんありますが、サンプルなのでこのくらいにしておきます。
追加した店舗などが画面左のウィンドウのレイヤーの中に表示されています。
新宿駅も起点として追加しています。

デフォルトの設定では新しい地図は非公開になっているので、「+共有」ボタンを押して「ウェブ上で一般公開」を選択します。
これで誰でも見られる状態になります。
次にメニューボタンから「自分のサイトに埋め込む」をクリックします。
埋め込み用のHTMLタグが表示されるのでこれをコピーします。

コピーしたHTMLタグをホームページにHTML編集モードでペーストします。
実際に見てみると、編集中の地図と同じように地図や追加した店舗や駅が表示されています。

Googleマップを埋め込む方法としてAPIを使った埋め込みがあります。
APIを使うことでただ埋め込むだけでなく、JavaScriptを使って見た目などをオリジナルにカスタマイズして埋め込むことができます。
ここではAPIの使用制限と新規取得の方法、ホームページに表示する方法を紹介します。

Googleマップに限った話ではないですが、APIには使用制限があります。
制限を超えると有料の場合もあるので注意が必要です。
Googleでは200ドル分まで無料で使えるサービスがあります。
あまりこの制限を超えることはないので基本的に無料で使えると思って大丈夫です。

Googleの価格表を見ると、通常のマップでAPIを使う場合は読み込み無制限で100.001～500,000回までのAPIの呼び出しが無料です。
それ以降は有料になる可能性があります。
また、ルートやプレイスなどの機能を使うと有料になります。
有料分も200ドルまでなら無料なので安心です。

APIを新規取得するにはまず「Google Maps Platform」にアクセスします。
「マップ」の詳細をクリックし「使ってみる」をクリックします。
「Google Cloud Platform」の無料トライアルに登録することで無料でAPIを取得できるようになります。

有料の300ドル分が無料で使えるというトライアルです。
最新情報のメールの受け取りに「はい」か「いいえ」で選択、利用規約を読んで「はい」を選択し、最後に「同意して実行」をクリックします。
これで無料トライアルの登録が完了です。

APIの取得にはプロジェクトが必要なので、新規のプロジェクトを作成します。

「Google Cloud Platform」 のメニューから「APIとサービス」をクリックしその中の「認証情報」をクリックします。
「認証情報を作成」のボタンを押すことでAPIキーが作成されます。

作成されたAPIキーには制限をかけてください。
アプリケーションの制限でHTTP リファラー(ウェブサイト)を設定しておくことで、APIの使用が制限されます。

任意のリファラーを設定できます。
下の画像の赤枠の欄に自分のホームページのURLを入力することで、そのホームページでしかAPIを使用できなくなります。
セキュリティ上安全になります。

APIを使ったGoogleマップを埋め込む場合、CSSとJava Scriptの混ざったものを直にHTMLに入力します。
下の画像が全体のサンプルコードです。

まずはマップを表示させる「div」を作成します。
「<div id="maps"></div>」

次にCSSでスタイルの設定です。
最低限「height」(要素の高さ)を設定しておく必要があります。
「<style>
#maps{  height: 500px;}
</style>」

次に、APIを使用するためにライブラリの読み込みを記述します。
取得済みのAPIキーを{ }内に記述します。
「<script src="//maps.googleapis.com/maps/api/js?key={APIキー}&callback=initMap" async></script>」

次にJava Script(JS)の記述です。
「function initMap() {
  var mapPosition = {lat: 35.690141, lng: 139.700381};
  var mapArea = document.getElementById('maps');
  var mapOptions = {
    center: mapPosition,
    zoom: 16,  };
  var map = new google.maps.Map(mapArea, mapOptions);}」

赤い下線の数字は表示する地図の位置情報の座標です。
ここでは新宿駅の位置情報の座標となっています。

位置情報の座標は、Googleマップで目的の店舗などを表示し赤いピンを付けます。
そのピンを右クリックすると「この場所について」という項目があるので、これをクリックすると座標が表示されます。

実際に見てみると以上の画像のようにホームページで表示されます。

Googleマップ のAPIキーの埋め込み料金は大きく制度が変わった為、どのような料金体制を取っているのか分かりづらいと思います。Googleマップ の料金制度を詳しく見ていきたいと思います。

現在では「Google Maps API」では有料APIキーが必須となっています。APIキーを使用するには 「Google Cloud Platform」 の無料トライアルへの登録も必須です。ですが、無料のプランもある上に有料プランでも200ドルまでは無料で使えます。また、グーグルからもほとんどの場合は無料範囲(200ドル)を超えることはないと説明されています。

「Google Cloud Platform」 は2018年6月11日に新しい価格プランに変更されました。
「Google Maps API」でルートを使用した場合はすべて有料ですが、無料範囲(200ドル)で賄える価格になっています。

APIを使用するメリットはデザインを細かくアレンジしたりできることです。
一方ですでに説明したように完全無料ではなく有料になる可能性もあります。
最初に説明したiframeを使用した、GoogleマップからHTMLタグを取得する方法であれば完全無料で使用できます。

自分のサイトで使用している地図の埋め込み料金を調べるには「Google Cloud Platform」にアクセスし、使用しているプロジェクトの詳細を開きます。
今月の請求の詳細のページがあるので、そこで料金の確認ができます。

地図埋め込みのメリットは、一番大きいのは集客性です。店舗であっても会社であっても、またはイベントであっても、ウェブサイトを見た人に分かりやすく伝えて自分にとって有益なお客さんになってもらえることが重要です。

また、APIを使用して地図をカスタマイズすれば上の画像のいとう養鶏場さんのようにオリジナリティのある地図を掲載することもできます。
会社などのブランドをアピールする上でもオリジナリティのあるデザインはメリットになります。

地図の埋め込みはJava Scriptを使用しているので、単純な画像に比べると重い上に環境によっては開けない場合もあります。特にスマホだと通信が多くなったり、最悪アプリケーションが終了してしまう場合もあります。地図の埋め込みのほかに、テキストでアクセス方法などを記載しておくのが良いでしょう。

APIを使用した場合は呼び出し回数によっては有料になるという可能性もあるので注意が必要です。多くの場合が無料で収まりますが、アクセスが多いような場合は料金を気にしておきましょう。

Googleマップの埋め込みを行う上で使うサイトやツール、プラグインによっては使いづらい場合などもあるので、使用時に相性の良いツールなどを紹介していきたいと思います。

「Google Map Builder」はWordPressの便利なGoogleマップ作成プラグインです。WordPressにインストールすることで使えるようになります。地図上の店舗の情報を追加したり、HTMLを使用して記述できたりします。複数のピンを立てることもできます。

77のレビューの内、55が星5という高評価を受けているプラグインです。使用にはAPIキーが必要です。WordPressでウェブサイトを使っている方にオススメです。

iframeやAPIを使用した地図の埋め込みと比べて格段と簡単な地図の共有方法は「リンクを共有」を使うことです。共有したい地図の位置情報を取得できたら左のメニューにある「共有」をクリックします。

共有リンクとしてURLが表示されます。
このURLをウェブページにリンクとして貼ったり、メールやLINE、ツイッターなどのSNSで知り合いに送ることで自分が見ている地図と同じものを共有できます。

埋め込んだ地図が表示されない場合はAPIが問題になっているケースが多いです。
2016年6月に有料APIが必須になったことと2018年6月に仕様が変更されたことが関係している可能性があります。

自分のサイトに埋め込んだ地図が表示されなくなった場合はAPIを取得し直しましょう。既にAPIを取得していて表示されない場合は無料範囲の200ドルを超えたために制限がかかっている可能性があります。利用料金を確認しましょう。