簡単！Googleマップのカスタマイズ。マップデザインの色を変更するサンプル。

Google Mapsの色やデザインを変更するサンプルを紹介します。

このサンプルは、マップの道路、建物、川、海などの色を任意の色に変え、その上にオリジナルアイコンを表示させるサンプルです。
さらにアイコンをクリックすると、インフォウィンドウを表示させることが出来ます。
このような形で表示できます。

こちらのサイトを参考させていただきました。

サンプル

まずは動作サンプルを確認してください。

マップの利用にはAPIキーの取得が必要です。
APIキーの取得方法に関しては、こちらの記事が参考になりました。
http://bashalog.c-brains.jp/17/08/25-200000.php

さらに、Google Maps JavaScript Apiは、SSL認証されているURLでなければ表示できないようです。
表示するURLはhttps://で始まるURLにしてください。

マップのデザイン変更用のjavascriptコードは以下のサイトで取得することが出来ます。
サンプルデザインがたくさん登録されており、好きなマップのデザインを選び、コードをコピーするだけです。

以上、試してみてください。