千葉のホームページ作成会社ならリアサポートへ！Googleマップをカスタム

公開日：2018年03月20日カテゴリー：コラムと公論

ホームページへのアクセスがアップしてきたな、と思ったら、それはホームページへの集客が出来るようになってきたということ。少しずつ、周りからの反響も聞こえるようになってくるはずです。
サイト訪問者が増えてきたら、次はホームページ経由の実店舗への誘導を目指したいもの。お店に足を運んでいただくためには、地図はとても大切なツールです。

分かりやすく、なおかつデザイン性の高い地図で、差をつけてみませんか？
　

Googleマップをカスタムする必要性

Googleマップは、分かりやすい地図という点でとても優秀です。ホームページ内にGoogleマップを埋め込んでおけば、道に迷ってもスマホで現在地からのナビもしてくれますし、新しい道や建物ができたり、目印のお店が無くなったりしても自動で更新してくれるので、イラストの地図を作りなおして変更する必要もありません。

ただ…。せっかくオシャレなホームページができたのに、Googleマップがサイトにマッチしていない！という方、少なくないのでは…？そんな方に朗報！
Googleマップのデザインは、あるツールを駆使すれば初心者でもカスタムが可能です。

Googleマップのカスタムの方法は様々ありますが、HTMLが良く分かっていない、という方にはハードルが高めのやりかたが多いです。今回はその中でも、比較的簡単な方法をご紹介しましょう。

Googleマップカスタムの下準備

まずはGoogle　APIキーを取得

2016年からGoogleマップの表示にはこのAPIキーが必須になりました。少し面倒ですが、一度取得してしまえばその後は不要なので、はじめにやってしまいましょう。
APLキーを取得するにはこちらから

まずは上記サイトにアクセスし、ページ右上の「キーの取得」またはページ中央の「キーを取得する」をクリック。
　

　
▽をクリックして使用するprojectを選択。
　

NEXTをクリックすると、APIキーが発行されます。
初めてでも簡単に取得できますのでご心配なく。
　
　

APIキーの制限設定を行う

APIキーの発行までは難しくありませんが、この後の設定がすこしだけやっかいです。しかし、APIキーを発行しただけでは制限がかかっていない状態で危険ですので、面倒でも設定しておきましょう。

まずは「Google Developers Console」にアクセス。
先ほど作ったAPIキーのプロジェクト名を選択し、左上の「Google APIs」のロゴをクリックすると、APIキーの設定ページへとびます。

左に現れるタブの「認証情報」をクリックすると先ほど作成したAPIの設定になりますので、中央の「API key」をクリック。

現在は制限の部分のなしのチェックが入っていますが、これをHTTPリファラー（ウェブサイト）にチェックをいれます。

　
下部に「このHTTPリファラー(ウェブサイト)からのリクエストを受け入れる」が出現するので、Googleマップを設置するサイトのURLを入れます。ワイルドカード（*）を入れ忘れないようお気をつけ下さい。あとは保存を選択すれば完了です！

設定ページで「API Key」脇の黄色い「！」が無くなっていればOKです。

Googleマップカスタム、本番

さあ、下準備が終わったところで、実際にGoogleマップをカスタムしていきましょう。

方法は色々ありますが、一番簡単なのはEZ Mapを活用する方法。
　
EZ Map
　
英語のサイトなので最初は分かりにくい点もあるかもしれませんが、あれこれいじっていけばすぐに使い方が分かるはずです。
使いたい場所の地図を表示する方法は、ズームして詳細な地図を表示してもいいですし、経度緯度を入力してもOK。
　　

　
Markersの部分では、任意のところにマーカーを入れたりアドレスを入れたりすることも可能ですよ。
　
　
そして、最大の目的、Googleマップのカスタムです。
左側部分を下へとスクロールしてみましょう。様々なカスタムマップのテンプレートが現れます。
　
　

　
　
好きなテンプレートを選択すれば、右側のマップに反映されるようになっています。
　
　

　
　
気に行ったテンプレートやカスタムが完了したら、Your map codeをコピーし、ホームページ内のGoogleマップを埋め込みたい部分にペーストすればいいだけ。
様々なテンプレートが用意されていますので、サイトの雰囲気に合ったGoogleマップのカスタムを目指してみてはいかがでしょう？