グーグルマップ(Google Map)の色変更 簡単な設定方法

Pocket

デザインヒント ブログ

グーグルマップ(Google Map)とは

Googleさんが提供しているサービスのひとつで、フリーで利用することが可能です。多機能で使いやすいため、多くのユーザーが利用しています。

このマップを自分のホームページに導入したり、資料に画像として貼りつけたりすることも出来ます。今回は簡単にグーグルマップの全体の色を変更する方法をご紹介します。

グーグルマップ(Google Map)の色変更のメリット

  • ホームページの色見と合わせられる
  • 他のサイトとの差別化
  • 資料の完成度UP

そのままコードを貼りつけても問題なく綺麗な地図が掲載できますが、ちょっとした小技を使うことで「マップ全体のカラーを統一」して色変更することが出来ます。

小さな仕掛けでグッと統一感が出せますよ!

目的地の座標をとって準備しましょう

色変更の作業に移る前に、目的地の座標を取ってメモしておくとあと後便利です。

例えば今回は「東京タワー」にします。ゴーグルマップ上で「東京タワー」を表示させてから、目的地のポイントにカーソルを合わせて右クリックしてください。

右クリックしたことで表れたメニューの「この場所について」をクリックすると、画面下に小窓が座標が現れ、座標をクリックすると更に左上に「座標」があらわれます。ここで得た座標をメモして控えておいてください。

google mapデザインカスタマイズコード生成ツールを使った方法

こちらの方法を使うと、直感的に簡単な操作でマップの色変更が可能です。

以下のリンクにアクセスし、必要事項(先ほど準備した座標も)を記入して「地図を生成、コードを再出力する」ボタンをクリック。
マップの下にコードが現れますので、コードを全てコピーし、挿入したいページの箇所へペーストします。

google mapデザインカスタマイズコード生成ツール

http://creator.aainc.co.jp/archives/3752

と、以前はココまでの作業でOKだったのですが、、現在は利用回数による課金制度があるため個人を特定できるAPIキーが必要となっています。利用回数は1カ月25000回を超えると課金案内が来るというもの。アクセス回数の多いサイトでは有料の利用になる可能性がありますので詳細も合わせてご確認ください。
→Google Map課金制度についての参考ページ(https://www.zenrin-datacom.net

API キー取得方法

Googleアカウントにログインした状態で以下にアクセス
https://console.developers.google.com/iam-admin/projects 推移した画面で「+プロジェクトを作成」ボタンをクリック

プロジェクト名を記入するウィンドウが現れますので、4~30文字以内で任意の言葉(英数字)を入れて下さい。

少し待機時間がありますが、そのまま待っているとプロジェクトが作成されます。ほどなくAPIライブラリがずらりと並ぶ画面になりますのが慌てずに…

左サイドメニューの「認証情報」をクリックしてください。画面中央に現れたウィンドウの「認証情報を作成」ボタンをクリック。続けてAPIキーをクリックしてください。

すると「APIキーを作成しました」ということで、めでたくAPIキーを確認するウィンドウが現れます。

※このとき、右下の「キーを制限」から推移したページでサイトurlを記入すると、指定したサイト以外での使用を禁止する働きとなります。任意で設定してください。

取得したコードは、先ほどペーストしたマップのソースコードに追加することでエラーなく表示できるようになります。

先頭の<script>タグ、api/js?の後の「sensor=true」を「key=あなたのAPIキー」に変更です。

追加前

<script src="http://maps.google.com/maps/api/js?sensor=true"></script>

追加後

<script src="http://maps.google.com/maps/api/js?key=あなたのAPIキー"></script>

ふぅ…。以上となります。無事に表示されていると良いのですが。

※因みにAPIキーですが、「キーを制限」の設定をしていなければ使い回しも可能です。再生回数には注意が必要かもしれませんが…。

グーグルマップの色を変更する方法は他にも「Google Maps API Styled Map Wizard(改)」使ったやり方もありますが、今回は予想以上に説明が長くなってしまったので別の機会に紹介させていただきます。

少し読みにくかったかもしれませんっ。ごめんなさい…。

本日も最後までお読みいただき有難うございました。

Sponserd Links

Midori Design Works © 2016 All Rights Reserved.

Midori Design Works ミドリデザインワークス