WEB業界で働く人や興味がある人に役立つ情報サイト“qam（カム）”

投稿者： JQ
カテゴリー： マークアップ >html

みなさんはお客様のページに、会社やお店の位置を示すためにグーグル マップを埋め込むとき、どのようにおこなっていますか？
一番簡単な方法としては、グーグル マップのページに行き、iframeの埋め込み用タグを発行してそのまま貼り付ける方法だと思いますが、それだと少し不都合なことが出てきます。

スマホサイトでの埋め込みには配慮が必要

こんな経験ありませんか？

＜デモページはこちら＞

こちらのデモページをスマホで見てみてください。
スマホサイトを見ていて、途中にグーグル マップが横幅いっぱいに出てきた時、さらに下にスクロールしようとしてもグーグル マップがスクロールするだけで、なかなか下の要素を見ることができません。
これでは、ユーザビリティが下がってしまい、離脱の原因になってしまいます。

画像化したグーグル マップで離脱を回避

＜デモページはこちら＞

今度はこちらのデモページをスマホで見てみてください。
こちらのページは、同じ位置をピンで示していますが、グーグル マップ自体が画像になっているのでマップの上で指を動かしても、グーグル マップだけがスクロールしてしまうという状況を回避し、しっかりサイトの最下部まで見ることができます。

手動でグーグル マップをキャプチャして貼り付けているわけではなく、ページが開かれるたびに最新のグーグル マップの情報を元に画像化したものになるので、道路や建物の状況が変わってもしっかり更新されます。

ここから、この画像化したグーグル マップの埋め込み方法をご紹介します。

画像化グーグル マップを埋め込む方法

グーグル マップAPIのキーを取得する

この画像化グーグル マップの機能は、以前はAPIキーを取得しなくても使えたようなのですが、現在は公式サイトのサンプルコードにもあるようにAPIキーを取得する必要があります。

【補足】APIキーの取得方法

補足情報として、はじめてグーグル マップのAPIキーを取得する方のために、その方法をご紹介します。

グーグル マップAPIのAPIキーを取得するためには、「Google APIs」のページから申請を行う必要があります。

アクセスしたら、「Google Maps API」の中の「Google Static Maps API」をクリックします。

プロジェクトを作成する

はじめて利用する場合はAPIプロジェクトを作成する必要がありますので、「プロジェクトを作成」をクリックします。

「プロジェクト名」に任意のプロジェクト名を入力したあと、利用規約を確認・同意し「作成」をクリックします。

APIを有効にする

プロジェクトが作成できたら「Google Static Maps API」を有効にします。「有効にする」をクリックします。

認証情報の作成

すると、認証情報を作成するように求められることがあります。求められた場合は「認証情報に進む」をクリックします。

Webページ上で使用するので、「APIを呼び出す場所」には「ウェブブラウザ（Javascript）」を選択します。

任意のキーの名前を設定します。また、自分で発行したAPIキーだとしても、ソースコード上で丸見えの状態になりますので、第三者に使用されてしまう場合があります。
それを回避するために、「このHTTPリファラー（ウェブサイト）からのリクエストを受け入れる」の欄に自分がAPIを使用するサイトのURLを入力しておきます。
（URLの指定にはワイルドカードの「*（アスタリスク）」が使用できます。）
最後に「APIキーを作成する」をクリックします。

APIキー発行完了

これで、APIキーの発行が完了しました。

今後は左メニュー「認証情報」からAPIキーを確認することができます。

画像グーグル マップ埋め込みコードを設置する

いよいよ、画像化したグーグル マップを埋め込みます。
方法はとても簡単で、埋め込みたい場所にimgタグを設置し、そのsrc属性に以下を指定するだけです。

<img src="https://maps.googleapis.com/maps/api/staticmap?center=■地図の中心座標■&size=■画像サイズ■&sensor=■GPSの使用■&key=■発行したAPIキー■">

上記の各パラメータの説明は以下のとおりです。こちらは全て必須です。

• center…地図の中心地。座標で指定したり、名称で指定することができます。ただし、名称で指定する場合はURLエンコードをする必要があります。
• size…地図のサイズ。ヨコのサイズxタテのサイズの順に指定します。
• sensor…ページを閲覧しているユーザのGPS情報を元に情報を表示しているかどうかを設定します。
• key…前述の手順で取得したAPIキーを記載します。

下の地図が画像化したグーグル マップを埋め込んだ結果です。（名古屋城を中心に表示しています。）

<img src="https://maps.googleapis.com/maps/api/staticmap?center=%e5%90%8d%e5%8f%a4%e5%b1%8b%e5%9f%8e&size=590x360&sensor=false&scale=2&zoom=15&markers=%e5%90%8d%e5%8f%a4%e5%b1%8b%e5%9f%8e&key=AIzaSyBL3IlIFG-NBxi0Wd1miefyfgY3LZt-BoM">

指定できるパラメータは必須の物以外にも以下の様なものがあります。（一例）

• zoom…地図の縮尺（ズームの度合い）を指定できます。数字が大きくなるほどズームします。
• markers…地図の中にピンを立てることができます。ピンを立てる位置は座標やURLエンコードした名称で指定できます。
• format…地図画像の形式を指定できます。これにはpng、gif、jpgなどがあります。
• maptype…地図の形式を指定できます。初期値はroadmapですが、航空写真のsatellite、地形図で表すterrainなどがあります。
• scale…2と指定するとiPhoneのRetinaディスプレイのように高精細な画面用に2倍の大きさで画像を取得できます。

まとめ

ここまで画像化したグーグル マップの埋め込み方法を見てきました。
「画像化してしまったら、移動ができないし利便性が下がるのでは？」という声も聞こえてきそうですが、それに対しては、PCページにはこれまでどおりiframeの埋め込み地図を利用し、スマホページには今回のような画像化マップをおいて、その画像にスマホのグーグル マップアプリへリンクするURLを貼っておくことで解消できます。
スマホのブラウザの中でグーグル マップを見ることは、アプリに比べてレスポンスが悪いので、あまりオススメできません。そのため、スマホではネイティブなグーグル マップアプリで地図を確認してもらったほうがいいと考えています。
レスポンシブコーディングが当たり前になってきている今、PCとスマホ、それぞれのユーザビリティを保つ事はサイト制作において、ますます大きなウェイトを占めてくると思います。

手間を惜しまず、利用者の目線に立ってサイトを設計、コーディングしていくことが大事だと思います。

それでは次回もよろしくお願いします。