Google Mapのデザインカスタマイズ5選 from Snazzy Maps

Google Mapのデザインカスタマイズ5選 from Snazzy Maps
Google Mapはよく利用されていますが、デザインはデフォルトというケースが多いのではないでしょうか。
Snazzy Maps - Free Styles for Google Maps

というサイトでは、こんなカスタマイズができますという事例を紹介しています。
これを参考にカスタマイズを初めて見てはいかがでしょうか。

#1 Light Monochrome Google Mapのデザインカスタマイズ5選 by Snazzy Maps まずはシンプルなモノクロタイプ。
単純にモノクロにするのではなく、少し明るめなのがポイントですね。

■記述
var myOptions = {
zoom: 15,
center: new google.maps.LatLng(53.385873, -1.471471),
mapTypeId: google.maps.MapTypeId.ROADMAP,
styles: [{"featureType":"water","elementType":"all","stylers":[{"hue":"#e9ebed"},{"saturation":-78},{"lightness":67},{"visibility":"simplified"}]},{"featureType":"landscape","elementType":"all","stylers":[{"hue":"#ffffff"},{"saturation":-100},{"lightness":100},{"visibility":"simplified"}]},{"featureType":"road","elementType":"geometry","stylers":[{"hue":"#bbc0c4"},{"saturation":-93},{"lightness":31},{"visibility":"simplified"}]},{"featureType":"poi","elementType":"all","stylers":[{"hue":"#ffffff"},{"saturation":-100},{"lightness":100},{"visibility":"off"}]},{"featureType":"road.local","elementType":"geometry","stylers":[{"hue":"#e9ebed"},{"saturation":-90},{"lightness":-8},{"visibility":"simplified"}]},{"featureType":"transit","elementType":"all","stylers":[{"hue":"#e9ebed"},{"saturation":10},{"lightness":69},{"visibility":"on"}]},{"featureType":"administrative.locality","elementType":"all","stylers":[{"hue":"#2c2e33"},{"saturation":7},{"lightness":19},{"visibility":"on"}]},{"featureType":"road","elementType":"labels","stylers":[{"hue":"#bbc0c4"},{"saturation":-93},{"lightness":31},{"visibility":"on"}]},{"featureType":"road.arterial","elementType":"labels","stylers":[{"hue":"#bbc0c4"},{"saturation":-93},{"lightness":-2},{"visibility":"simplified"}]}] };

var map = new google.maps.Map(document.getElementById('map'), myOptions);

#2 Icy Blue Google Mapのデザインカスタマイズ5選 by Snazzy Maps グッド攻めた感じのアイシーなスタイル。
冷え冷えするサイトには合いそうです。

■記述
var myOptions = {
zoom: 15,
center: new google.maps.LatLng(53.385873, -1.471471),
mapTypeId: google.maps.MapTypeId.ROADMAP,
styles: [{"stylers":[{"hue":"#2c3e50"},{"saturation":250}]},{"featureType":"road","elementType":"geometry","stylers":[{"lightness":50},{"visibility":"simplified"}]},{"featureType":"road","elementType":"labels","stylers":[{"visibility":"off"}]}] };

var map = new google.maps.Map(document.getElementById('map'), myOptions);

#3 Red Alert Google Mapのデザインカスタマイズ5選 by Snazzy Maps 2番目とは対照的な熱い感じ。

■記述
var myOptions = {
zoom: 15,
center: new google.maps.LatLng(53.385873, -1.471471),
mapTypeId: google.maps.MapTypeId.ROADMAP,
styles: [{"featureType":"water","elementType":"geometry","stylers":[{"color":"#ffdfa6"}]},{"featureType":"landscape","elementType":"geometry","stylers":[{"color":"#b52127"}]},{"featureType":"poi","elementType":"geometry","stylers":[{"color":"#c5531b"}]},{"featureType":"road.highway","elementType":"geometry.fill","stylers":[{"color":"#74001b"},{"lightness":-10}]},{"featureType":"road.highway","elementType":"geometry.stroke","stylers":[{"color":"#da3c3c"}]},{"featureType":"road.arterial","elementType":"geometry.fill","stylers":[{"color":"#74001b"}]},{"featureType":"road.arterial","elementType":"geometry.stroke","stylers":[{"color":"#da3c3c"}]},{"featureType":"road.local","elementType":"geometry.fill","stylers":[{"color":"#990c19"}]},{"elementType":"labels.text.fill","stylers":[{"color":"#ffffff"}]},{"elementType":"labels.text.stroke","stylers":[{"color":"#74001b"},{"lightness":-8}]},{"featureType":"transit","elementType":"geometry","stylers":[{"color":"#6a0d10"},{"visibility":"on"}]},{"featureType":"administrative","elementType":"geometry","stylers":[{"color":"#ffdfa6"},{"weight":0.4}]},{"featureType":"road.local","elementType":"geometry.stroke","stylers":[{"visibility":"off"}]}] };

var map = new google.maps.Map(document.getElementById('map'), myOptions);

#4 Midnight Commander Google Mapのデザインカスタマイズ5選 by Snazzy Maps ネーミングがいいですね、ミッドナイトコマンダー!
クールな感じに仕上がっており、使いどことも多そうです。

■記述
var myOptions = {
zoom: 15,
center: new google.maps.LatLng(53.385873, -1.471471),
mapTypeId: google.maps.MapTypeId.ROADMAP,
styles: [{"featureType":"water","stylers":[{"color":"#021019"}]},{"featureType":"landscape","stylers":[{"color":"#08304b"}]},{"featureType":"poi","elementType":"geometry","stylers":[{"color":"#0c4152"},{"lightness":5}]},{"featureType":"road.highway","elementType":"geometry.fill","stylers":[{"color":"#000000"}]},{"featureType":"road.highway","elementType":"geometry.stroke","stylers":[{"color":"#0b434f"},{"lightness":25}]},{"featureType":"road.arterial","elementType":"geometry.fill","stylers":[{"color":"#000000"}]},{"featureType":"road.arterial","elementType":"geometry.stroke","stylers":[{"color":"#0b3d51"},{"lightness":16}]},{"featureType":"road.local","elementType":"geometry","stylers":[{"color":"#000000"}]},{"elementType":"labels.text.fill","stylers":[{"color":"#ffffff"}]},{"elementType":"labels.text.stroke","stylers":[{"color":"#000000"},{"lightness":13}]},{"featureType":"transit","stylers":[{"color":"#146474"}]},{"featureType":"administrative","elementType":"geometry.fill","stylers":[{"color":"#000000"}]},{"featureType":"administrative","elementType":"geometry.stroke","stylers":[{"color":"#144b53"},{"lightness":14},{"weight":1.4}]}] };

var map = new google.maps.Map(document.getElementById('map'), myOptions);

#5 Avocado World Google Mapのデザインカスタマイズ5選 by Snazzy Maps ぬくもり感あるデザインで、これもどこかで活用できそうなスタイルです。

■記述
var myOptions = {
zoom: 15,
center: new google.maps.LatLng(53.385873, -1.471471),
mapTypeId: google.maps.MapTypeId.ROADMAP,
styles: [{"featureType":"water","elementType":"geometry","stylers":[{"visibility":"on"},{"color":"#aee2e0"}]},{"featureType":"landscape","elementType":"geometry.fill","stylers":[{"color":"#abce83"}]},{"featureType":"poi","elementType":"geometry.fill","stylers":[{"color":"#769E72"}]},{"featureType":"poi","elementType":"labels.text.fill","stylers":[{"color":"#7B8758"}]},{"featureType":"poi","elementType":"labels.text.stroke","stylers":[{"color":"#EBF4A4"}]},{"featureType":"poi.park","elementType":"geometry","stylers":[{"visibility":"simplified"},{"color":"#8dab68"}]},{"featureType":"road","elementType":"geometry.fill","stylers":[{"visibility":"simplified"}]},{"featureType":"road","elementType":"labels.text.fill","stylers":[{"color":"#5B5B3F"}]},{"featureType":"road","elementType":"labels.text.stroke","stylers":[{"color":"#ABCE83"}]},{"featureType":"road","elementType":"labels.icon","stylers":[{"visibility":"off"}]},{"featureType":"road.local","elementType":"geometry","stylers":[{"color":"#A4C67D"}]},{"featureType":"road.arterial","elementType":"geometry","stylers":[{"color":"#9BBF72"}]},{"featureType":"road.highway","elementType":"geometry","stylers":[{"color":"#EBF4A4"}]},{"featureType":"transit","stylers":[{"visibility":"off"}]},{"featureType":"administrative","elementType":"geometry.stroke","stylers":[{"visibility":"on"},{"color":"#87ae79"}]},{"featureType":"administrative","elementType":"geometry.fill","stylers":[{"color":"#7f2200"},{"visibility":"off"}]},{"featureType":"administrative","elementType":"labels.text.stroke","stylers":[{"color":"#ffffff"},{"visibility":"on"},{"weight":4.1}]},{"featureType":"administrative","elementType":"labels.text.fill","stylers":[{"color":"#495421"}]},{"featureType":"administrative.neighborhood","elementType":"labels","stylers":[{"visibility":"off"}]}] };

var map = new google.maps.Map(document.getElementById('map'), myOptions);

Google Mapのカスタム方法
下記の手順です。
また実際のサンプルはサイトにもありますので、ご参照ください。
1:Google APIs Consoleへhttps://code.google.com/apis/console
2:左サイドにある「Services」をクリック
3:「Google Maps API v3」をオンに
4:左サイドの「API Access」をクリックするとAPI keyがありますので、そちらをコピー。
5:あとはコードを書く。
<script type="text/javascript"src="https://maps.googleapis.com/maps/api/js?key=APIキー&sensor=false"></script>
<script type="text/javascript">
google.maps.event.addDomListener(window, 'load', init);
function init() {
//ここにそれぞれvar myOptions以下のものを書く
}

sponsors

「Google Mapのデザインカスタマイズ5選 from Snazzy Maps」をシェアする

記事作成:
記事URL:

TOP > > > Google Mapのデザインカスタマイズ5選 from Snazzy Maps