Google Mapのデザインをカスタマイズする

こんにちは、ウェブラボ技術メモです。

「Google Map」は、会社のアクセスページなどで

地図を公開する手段として、多くのホームページで使われていますね。

オシャレなデザインのホームページを作成する際に

Google Mapも色味を変えれたら…と思ったことはありませんか?

今回はGoogle Maps APIを使用して

Google Mapのデザインをカスタマイズしてみます。

APIキーの取得

Google Map APIを使用する際は、APIキーの取得が必須となります。

Googleは、2018年6月11日よりGoogle Maps Platformという新しいプランを発表しました。

これに伴い、APIキーが未設定のマップは正常に表示されなくなります。

この新プランについては、下記の記事でも紹介しております。

https://www.weblab.co.jp/staff/marketing/6354.html

実装方法

今回は下記の生成ツールを参考に実装致しました。
http://creator.aainc.co.jp/archives/3752

後述しますが、このツールで生成されるコードは古いため、一部のコードを書き換える必要があります。

それでは実際に実装していきましょう。

生成ツールの入力項目の順に説明致します。

■タイトル

地図のタイトルを入力します。
会社の地図であれば、社名を入力しましょう。

■座標

グーグルマップで表示する位置座標を入力します。
下記より、その位置座標の調べ方について説明していきます。
  1. 地図に掲載したい場所を、「Google Map」で検索します。
  2. 地図に掲載したい場所とその周辺が表示されたら、地図のマーカーを置きたい箇所にマウスカーソルを置き、右クリックを押します。
  3. 右クリックで表示されたメニューから「この場所について」をクリックします。
  4. 表示されたウインドウに書かれている、「,(カンマ)」で区切られた2つの数字が、必要となる位置座標です。

■色

「Google Map」のベースカラーとなる、カラーコードを入力します。
入力したカラーコードを基準に、地図全体やアイコンの色味が自動で決定されます。

■縦幅・横幅

px単位の数値を入力します。

■拡大比率

Google Mapの初期拡大比率を設定します。
拡大比率は「0~22」程度あり、数値が大きくなるほど拡大します。
座標で設定したマーカーの場所とその周辺を表示する場合であれば「16~19」がよいでしょう。

以上の項目を入力し終えましたら、すぐ下にあるボタンをクリックします。

その後すぐに地図のプレビューとコードが生成されます。

実装

ここからは生成されたコードを使って、実装を行います。

まず、生成されたコードの「1行目~下から2行目」を、head内またはbody内に記入します。

最後の行の記述は残しておきます。

1行目はGoogle Maps APIを読み込むための記述、

2行目以降はjavascriptの記述となります。

■HTMLhead内

先述のように、生成ツールが古く、生成されるコードにはAPIキーが入力されていません。

1行目のAPIを読み込む記述は、下記のように変更してください。

■変更前


■変更後

残しておいた最後の行は、地図を表示する記述となります。

実際に表示させたい箇所に記入します。

■HTML body内


コードの調整

これで実際に表示されれば完成…ですが
このままではマーカーが表示されません。
そこで少しだけコードの調整を行います。

用意した画像をマーカーとして使う場合

下記のコードに書かれている「/icon.png」は、マーカーの画像を指定しています。

使いたい画像を「icon.png」に設定し、該当する場所にアップロードするか
使いたい画像のあるURLを記入します。
必要であれば、アイコンサイズやアイコン位置の調整も行いましょう。

■HTMLhead内


デフォルトのアイコンをマーカーとして使う場合

とくに画像を用意しない場合は、下記の記述を探して削除しましょう。

するとデフォルトのマーカーが表示されるようになります。

■HTMLhead内


■HTMLhead内

マーカーのアニメーションを外す

ページ読み込み直後のアニメーションも不要という場合は、
下記の記述を変更します。

■変更前


■変更後

「title」と書かれた行の最後にある「,(カンマ)」を削除し忘れないようにしてください。

作成例

これでGoogle Mapのカスタマイズが完了しました!

これまでの調整を行ったコードで

作成したGoogle Mapは下記となります。
DEMOはこちら

以上、技術メモでした。

  • このページを共有する

関連記事こちらの記事も合わせてどうぞ。