WEBサイト制作で、
- 利用ユーザーの多さ
- 地図の正確さ
- 拡大・縮小といった機能性の充実性
といったことから、地図の埋め込みによく利用されるGoogleMap。
実は、このGoogleMapはデザインの拡張性も高いのです。
ピンアイコンを自作した画像で設定したり、
地図の初期拡大率を設定したり、
地図を指定の色やグレースケールに設定することも可能です。
デザインをカスタマイズしたGoogleMapを埋め込むことで、
サイト全体のデザインコンセプトを損なわない地図を実現することができるのです。
ここでは、埋め込みGoogleMapのデザインをカスタマイズする方法についてご紹介していきます。
デザインカスタマイズを行わない場合は、もっと簡単な設置方法がありますので、以下のページを参考にしてください。
目次
【STEP1】GoogleMap埋め込み前の準備
GoogleMap設置用APIキーの取得
GoogleMapの埋め込みを行うには、GoogleMapAPIを利用します。
そして、2016年6月22日以降、GoogleMapAPIを利用するにはAPIキーが必要になりました。
ちなみに、APIキーを設定せずにGoogleMapAPIを呼び出すと、
「MissingKeyMapError」というエラーが発生して地図は表示されません。
GoogleMapAPI公式サポートで指示される通り、
パラメータを設定するためのAPIキーを取得して設定を行いましょう。
APIキーを取得する手順
APIキーを取得は、以下のGoogleMapAPI公式ページから得ることができます。
まずは、以下のリンクから公式ページを表示して「キーの取得」をクリックしましょう。
外部ページGoogleMapAPI公式ページ
次に、APIを利用するWEBサービスの名前を入力します。
サイト上に表示されるものではないただの識別用ラベルなので、
適当に導入先のサイト名などを入力しておきましょう。
APIキーが生成されますので、このキーをコピーしておきましょう。
以上で、GoogleMap設置用APIキーの取得は完了です。
埋め込み地図の中心座標の取得
GoogleMapAPIを使って地図を埋め込む場合、
地図の中心点となる座標を設定する必要があります。
以下の手順で中心点の座標を求めましょう。
地図中心点の座標を求める手順
GoogleMapを開き、
埋め込み時に中心点としたい場所にカーソルをあてて右クリックします。
外部ページGoogleMapページ
メニューが出てきますので、「この場所について」をクリックしましょう。
ページ下部にその場所についての情報が出ます。
ここに記載されている座標をメモしておきましょう。
もしくは、座標をクリックするとページ左上の検索窓に座標がテキストで表示されますので、その座標をコピーしても良いです。
以上で、埋め込み地図の中心座標の取得は完了です。
【STEP2】自分のサイトにGoogleMapを埋め込む
デザインをカスタマイズする前に、
まずは基本となる地図をGoogleMapAPIを使って自分のサイトに埋め込みましょう。
GoogleMapAPIを呼び出す
まずは、GoogleMapAPIを呼び出します。
<head>〜</head>に以下の呼び出し文を記述しましょう。
ここで、先ほど準備したAPIキーが必要になりますので、手元にご準備ください。
HTML
地図表示エリアの準備
地図表示表示用エリアをHTMLとCSSで準備していきます。
表示エリアは、適切なサイズを指定しておきましょう。
サイズ指定が行われていないブロックでは地図が表示されませんので、必ず横幅、高さを指定するようにしましょう。
HTML
CSS
地図を表示するスクリプト文の記述
サイト上の任意の箇所に、以下の地図表示用スクリプト文を記載します。
場所は、GoogleMapAPI呼び出しの後であればどこでも良いですが、表示速度向上のため、ヘッダーではなくフッターに記述するのが適しているでしょう。
以下のコードでは、
ページ読み込み時に、GoogleMap表示用関数「map_initialize() 」を呼び出しています。
jQuery
【STEP3】マップデザインをカスタマイズする
マーカー（ピンアイコン）に自作画像を設定するカスタマイズ
デフォルトでは、マップに表示されるマーカーは一般的なGoogleMapで使われているものと同じで表示されます。
これを自分の好きな画像に差し替えていきましょう。
以下のように、
マーカーの設定で画像データのURLを渡すことによって、
自分で用意した画像がマーカーとして適用されます。
オリジナルマーカー使用時のサンプルプログラム
地図をグレースケールで表示する
地図をグレースケールで表示するには、
地図のスタイルにグレースケール表示用の設定を追加する必要があります。
以下のプログラムのように、
「saturation（彩度）」を最低値の-100に設定することによってグレースケール表示となります。
グレースケールでオリジナルマーカー使用時のサンプルプログラム
地図をカスタマイズする上で便利なサイトの紹介
GoogleMapのデザインカスタマイズでは、
「基本となる地図に対して変更を行いたい項目の設定を追加する」ことによって、
追加された項目のみオリジナルデザインに上書きされていきます。
しかし、「どの設定値をどうしたらどのようなデザインになるのか？」ということをイメージだけで設定していくのは非常に難しいことです。
そこで、以下の設定用サイトで視覚的にデザインを確認しながら、
最後にまとめて設定プログラムをコピーしてしまう方法がおすすめです。
外部ページStyled Map Wizard
「Styled Map Wizard」の詳しい使い方は、
以下のページを参考にしてみてくださいね。
【応用編】WordPressで指定したページのみカスタム地図を表示するサンプルプログラム
WordPressでサイトを作っていて、
もっと言うならば、全てのサイトにスクリプトを実行させるのは無駄なので、会社概要ページのみスクリプト文を実行させたい。
ということがあります。
そんな時は、ページのIDを指定してスクリプトを実行させることで、
無駄なく必要な箇所にのみプログラムを走らせることができます。
HTML
CSS
javascript
