Googleマップの経路案内をWebサイトに埋め込む方法｜埋め込みコードとカスタムフォームの作り方

地図アプリやナビゲーションサービスは数多く存在しますが、その決定版といえばやはりGoogleマップです。パソコン、タブレット、そしてスマートフォンでも9割方Googleマップを使っているという人も多いのではないでしょうか。最も充実した地図データ、多彩なナビゲーション・ルート検索オプションに加え、ストリートビュー、徒歩・自転車・公共交通機関の情報など、便利な機能が満載です。

しかし、Googleのサイト外で地図や経路案内を利用したい場合はどうすればよいのでしょうか。例えば、自分の結婚式のウェブサイトや個人ブログがあって、招待客があなたのサイトにアクセスし、出発地の住所を入力するだけで、自動的に会場までのルートが表示されたら素敵だと思いませんか?

実現する方法は主に2つあります。最も簡単なのは、Googleマップが生成する埋め込みコードを使って地図をページに貼り付ける方法です。もう1つはやや技術的ですが、カスタマイズ性と動的な表現に優れています。以下で両方の方法を紹介します。

Googleマップを埋め込む

ある地点から別の地点への経路を表示したいだけであれば、表示中の地図を埋め込みコードで貼り付けるのが最も手軽です。まず、Googleマップで目的の経路を検索し、画面右下の歯車アイコンをクリックします。

「地図を共有または埋め込む」を選択し、「地図を埋め込む」タブを開きます。ここで地図のサイズを選択し、iframeコードをコピーして、任意のWebページに貼り付けるだけです。

この方法の唯一の欠点は、ユーザーに見えるのが静的な地図だけだという点です。次に紹介する2つ目の方法では、ユーザーが出発地の住所を入力すると、指定した目的地までの地図を自動生成できるフォームを作成できます。

Googleマップのフォームを作成する

2つ目の方法のイメージをつかむために、下のボックスにアメリカの住所を入力して、あなたの場所から筆者の自宅までのルートを取得してみてください。

面白いと思いませんか?この小さなフォームは、HTMLコードを記述できる場所であれば、どんなWebサイトやブログにも簡単に設置できます。小規模ビジネスのサイトにも最適で、連絡先ページに設置しておけば、訪問者は「住所をコピー→新しいウィンドウを開く→出発地を入力」という手間をかけずに、すぐにルート案内を利用できます。

では、このカスタマイズされた「ルート検索ボックス」はどうやって作るのでしょうか?まず、Googleが経路案内に使用しているURLの正しい書式を把握する必要があります。幸い、2地点間のルートを検索して、アドレスバーからURLをコピーすれば確認できます。ページ右下の歯車アイコンから「地図を共有または埋め込む」を選んでも構いません。

共有リンクタブにはURLが表示されます。これはブラウザのアドレスバーにあるURLと同じものです。参考までに、実際のURL全体を掲載しておきます。

https://www.google.com/maps/dir/3600+Thorp+Springs+Dr,+Plano,+TX+75025,+USA/854+Deerfield+Rd,+Allen,+TX+75013,+USA/@33.1125686,-96.7557749,13z/data=!3m1!4b1!4m13!4m12!1m5!1m1!1s0x864c3d45018517a5:0xbabd3c91a1321997!2m2!1d-96.762484!2d33.08947!1m5!1m1!1s0x864c16d3018a7f4f:0xab2052b5786cd29f!2m2!1d-96.666151!2d33.133892

かなり長いですね!中には一見意味不明なパラメータがたくさん含まれています。以前のGoogleマップのURLパラメータは非常にシンプルで分かりやすかったのですが、新しいURL構造はかなり複雑になっています。とはいえ、古い形式のパラメータも引き続き使えて、Googleが自動的に新バージョンへ変換してくれます。以下のリンクを見てください。

https://maps.google.com/maps?saddr=start&daddr=end

実際に試してみましょう。出発地と目的地の住所を引用符で囲んで指定し、URLをブラウザに貼り付けてみてください。筆者はstartを故郷のニューオーリンズ、endをテキサス州ヒューストンに置き換えたところ、次のようなURLになりました。

https://maps.google.com/maps?saddr=%22new+orleans,+la%22&daddr=%22houston,+tx%22

ちゃんと機能しました!ただし、ご覧のとおり、地図が完全に読み込まれると、Googleマップがリンクをはるかに複雑な形式へ変換してしまいます。さて、これでGoogleマップに渡せるシンプルなURLが用意できたので、次は出発地用と目的地用の2つのフィールドを持つ簡単なフォームを作成します。

訪問者に自分の住所を入力してもらい、あなたの場所へのルートを表示させたいだけであれば、2つ目のフィールドは非表示にして、あらかじめ目的地の住所を設定しておきましょう。

<form action="https://maps.google.com/maps" method="get" target="_blank">
出発地の住所を入力してください:
<input type="text" name="saddr" />
<input type="hidden" name="daddr" value="854 Deerfield Rd, Allen, TX" />
<input type="submit" value="get directions" />
</form>

上のコードを確認してみてください。最初の行でフォームを開始し、送信ボタンがクリックされたときにデータを maps.google.com/maps へ送信するよう指定しています。target="_blank" は、結果を新しいウィンドウで開くための指定です。続くテキストボックスは出発地の住所用で、空欄になっています。

2つ目のテキストボックスは非表示になっており、値として希望の目的地住所が設定されています。最後に、「Get Directions(ルートを取得)」というラベルの送信ボタンがあります。これで、誰かが自分の住所を入力すると、次のように表示されます。

さらに、いくつかの追加パラメータを使えば、経路案内や地図をより細かくカスタマイズできます。例えば、デフォルト表示を通常の地図ではなく航空写真(Satellite)にして、交通状況(Traffic)も表示したいとしましょう。

https://maps.google.com/maps?saddr=%22new+orleans,+la%22&daddr=%22houston,+tx%22&ie=UTF8&t=h&z=7&layer=t

URL内の layer=t と t=h に注目してください。layer=t は交通状況レイヤーの表示、t=h はハイブリッド地図を意味します。t パラメータは他にも、m(通常の地図)、k(衛星写真)、p(地形)に設定できます。z はズームレベルで、1〜20の範囲で変更できます。上のURLでは7に設定しています。これらのパラメータを最終的なURLに付け加えるだけで、あなたのサイトに高度にカスタマイズされたGoogleマップのルート検索フォームを設置できます!

うまくいかない場合は、コメントでお知らせください。できる限りお手伝いします。それでは、楽しんでください!