0%

Programmingプログラミングナレッジ

Posted:2017.10.31

グーグルマップのカスタマイズでグレースケールのマップに変更する

サイトに埋め込む事もAPIを使う事で簡単にできるグーグルマップですが、たまに通常のマップではなく、カラーが変更されたものを見かけたりしないでしょうか。このようなグーグルマップはjavascriptを使ってカスタマイズされたものになります。今回はGoogleから提供されているGoogle Maps APIを編集し、グーグルマップのカラーをグレースケールに変更するカスタマイズをしてみたいと思います。

 

Google Maps APIのAPIキーを取得する

現在、ウェブサイト上でグーグルマップを表示させるには基本的にAPIキーが必要になります。そこでまずはAPIキーを取得するところから始めます。

まずはGoogle Maps APIのサイト(https://developers.google.com/maps/web/)へアクセスします。表示された画面右上の「キーの取得」ボタンをクリックします。

 

グーグルマップのカスタマイズでグレースケールのマップに変更する

 

ダイアログが表示され、「+ Create a new project」 をクリックして、API作成のための新規プロジェクトを作成します。

 

グーグルマップのカスタマイズでグレースケールのマップに変更する

 

任意のプロジェクト名を決めて「CREATE AND ENABLE API」をクリックします。

 

グーグルマップのカスタマイズでグレースケールのマップに変更する

 

プロジェクトの作成に成功したらAPIキーが生成されますが、引き続き「API Console」のリンクからコンソールの画面へアクセスし、APIの設定を行っていきます。

 

グーグルマップのカスタマイズでグレースケールのマップに変更する

 

リンク先の画面が表示されたら、画面中程の「キーの制限」項目にある選択肢より「HTTPリファラー」を選択します。そしてグーグルマップを表示させるサイトのURLを入力します。ワイルドカードが使用できるのでURLに合わせて設定しておきます。そして「保存」をクリックして完了です。

 

グーグルマップのカスタマイズでグレースケールのマップに変更する

 

javascriptでマップをカスタマイズして表示

APIキーが取得できたらコードを見ていきます。まず、HTMLでは文頭のDOCTYPE宣言でHTML5であることを明示する必要があります。そしてマップを表示させる要素を作成しておきます。(下記の例ではid=”map”の要素になります)また、このマップを描画する要素ですが、必ずCSSで高さを指定してあげることが重要です。最後にscriptでグーグルマップの設定をしていきます。

【HTML & javascript】(一部抜粋)

<!DOCTYPE html>
 <html>
 <head>
   <style>
     #map {
       width: 100%;
       height: 300px;
     }
   </style>
 </head>
 <body>
   <div id="map>
   </div>
   <script>
     function initMap() {
       var customMap = new google.maps.Map(document.getElementById('map'), {
         zoom: 17,
         center: {
           lat: 34.686494,
           lng: 135.52618
         },
         styles: [{
           stylers: [{
             saturation: -100
           }]
         }]
       });
       var marker = new google.maps.Marker({
         position: {
           lat: 34.686494,
           lng: 135.52618
         },
         map: customMap
       });
     };
   </script>
   <script async defer src="https://maps.googleapis.com/maps/api/js?key=[APIキー]&callback=initMap">
   </script>
 </body>
 </html>

 

javascriptではグーグルマップの設定をしていくのですが、まずはマップ表示用の関数を定義します。そしてHTMLのmapを表示させる要素を指定します。

 

順番に目的地の緯度(lat)と経度(lng)を入力します。この時の緯度と経度の調べ方ですが、住所から緯度経度が割り出せるウェブサービスを利用するのが便利です。

【geocoding】
http://www.geocoding.jp/

 

そしてzoomの値にはデフォルトでの表示倍率を設定します。centerの値には先ほどの緯度と経度を入力することで目的地が中心となって表示されるようになります。

 

次のstylesの値で様々なスタイル変更ができるのですが、stylers項目でsaturationをマイナス値にすることで彩度を落とすことができます。こうすることでグレースケールで表示されるようになります。最後にマーカーの表示設定を行います。

 

この関数を次のグーグルマップAPIのjsファイルの読み込みのコールバックで呼び出すのですが、その時に先ほど生成したAPIキーをパラメーターに設定します。これでグレースケールのGoogleマップが表示されるようになりました。

 


 

このように一手間かけるだけで、よりサイトデザインとの調和が生まれるようになります。そのままでも十分に使えるグーグルマップですが、このようにカスタマイズも結構簡単にできるので、ぜひチャレンジしてみてはいかがでしょうか。今回のサンプルはこちらにご用意いたしました。

author
この記事を書いた人オガワ シンヤ
FacebookTwitter

DesignSupply.代表 / ディレクター・ウェブデザイナー・フロントエンドエンジニアをやっています。「ウェブとデザインでヒト・モノ・サービスを繋げ新しい価値を生み出す」をコンセプトに日々奮闘中!制作中はチョコレートが欠かせない三十路Webクリエイター。

制作のご依頼やお問い合わせ・パートナー業務提携のご相談はこちら

デザインやウェブ制作についてのご依頼やご相談、その他お問い合わせなどもお気軽にご連絡ください。フットワークの軽さやレスポンスの早さ、また豊富な経験や知識、技術を活かした対応力といったフリーランスクリエイターの強みでクライアント様、パートナー企業様のお力になります。デザインからコーディングやWordPress実装といったウェブサイト構築はもちろん、写真撮影や動画編集、コンテンツ制作からサイト運用サポートまで一括してお任せください。

ホームページ制作のご検討やウェブ運用でお悩みの経営者様や企業のウェブ担当者様をはじめ、個人で店舗を営んでいらっしゃるオーナー様、フリーで活動されているビジネスオーナー様はもちろんのこと、リソース不足でお困りの制作会社様、またクリエイターをお探しの代理店様も大歓迎です。

コンタクトをご希望の方はお手数ですが、下記よりお問い合わせフォームのページへアクセスしていただき、必要事項を入力の上メッセージを送信してください。確認でき次第すぐに折り返しご連絡致します。

こんな記事も読まれています

コメントもお気軽にどうぞ

記事に関するご質問やご意見などありましたら下記のコメントフォームよりお気軽に投稿ください。なおメールアドレスは公開されませんのでご安心ください。また、* が付いている欄は必須項目となります。

内容に問題なければ、下記の「コメントを送信する」ボタンを押してください。

CAPTCHA


ページトップへ
大阪市天王寺区のホームページ制作デザイン事務所(SOHO)DesignSupply.【デザインサプライ】