Google Mapsの色やデザインを変更するサンプルを紹介します。
このサンプルは、マップの道路、建物、川、海などの色を任意の色に変え、その上にオリジナルアイコンを表示させるサンプルです。
さらにアイコンをクリックすると、インフォウィンドウを表示させることが出来ます。
このような形で表示できます。
こちらのサイトを参考させていただきました。
サンプル
まずは動作サンプルを確認してください。
セッティング
マップの利用にはAPIキーの取得が必要です。
APIキーの取得方法に関しては、こちらの記事が参考になりました。
http://bashalog.c-brains.jp/17/08/25-200000.php
さらに、Google Maps JavaScript Apiは、SSL認証されているURLでなければ表示できないようです。
表示するURLはhttps://で始まるURLにしてください。
マップのデザイン変更
マップのデザイン変更用のjavascriptコードは以下のサイトで取得することが出来ます。
サンプルデザインがたくさん登録されており、好きなマップのデザインを選び、コードをコピーするだけです。
Snazzy Maps
ソースコード
以上、試してみてください。
人気記事ランキング
簡単！カレンダーから日付入力 Bootstrap Datepicker の使い方と解説
簡単。Bootstrapでアコーディオンパネルを作る方法
簡単。Bootstrapでバリデーションチェックができるフォームを作成する方法とサンプル
簡単!動画制作 GoPro Splice – iOS ipad iphone対応のアプリの解説・使い方
簡単！Bootstrapで作るタブメニュー＆ナビゲーション
bootstrap カルーセルを少しカスタマイズする方法
格安simスマホとガラケーの２台持ちで通信費節約mineo編
オバマ大統領や有名芸能人も愛用している腕時計チープカシオ(チプカシ)が話題。
