GoogleMapを簡単にカスタマイズできるサイト「SNAZZY MAP」をご紹介します。
「SNAZZY MAP」は下記のようなさまざまなデザインのGoogleMapを作成できるサイトです。
カスタマイズには、Google Maps APIの設定は必要ですが、基本的にコピペでOKです。
使用方法は下記になります。
１）GoogleApiのHTMLフォーマットをコピーしてくる。
最低限、下記のタグをBODYの間に貼り付け、最下部にある「YOUR_API_KEY」の部分にAPIKEYを入力することでGoogleMapが表示できるようになります。
下記ページが参考になるかと思います。
※Google Maps APIを始めて設定される方は下記ページが参考になるかと思います。
Google Maps API スターターガイド
<div id="map"></div>
<script>
function initMap() {
// Styles a map in night mode.
var map = new google.maps.Map(document.getElementById('map'), {
center: {lat: 35.336292, lng: 139.444951},
zoom: 12,
styles://↓ここにコピペする↓（styles:の後の改行は要りません）
[
{
"featureType": "administrative",
"elementType": "all",
"stylers": [
{
"saturation": "-100"
}
]
},
{
"featureType": "administrative.province",
"elementType": "all",
"stylers": [
{
"visibility": "off"
}
]
},
{
"featureType": "landscape",
"elementType": "all",
"stylers": [
{
"saturation": -100
},
{
"lightness": 65
},
{
"visibility": "on"
}
]
},
{
"featureType": "poi",
"elementType": "all",
"stylers": [
{
"saturation": -100
},
{
"lightness": "50"
},
{
"visibility": "simplified"
}
]
},
{
"featureType": "road",
"elementType": "all",
"stylers": [
{
"saturation": "-100"
}
]
},
{
"featureType": "road.highway",
"elementType": "all",
"stylers": [
{
"visibility": "simplified"
}
]
},
{
"featureType": "road.arterial",
"elementType": "all",
"stylers": [
{
"lightness": "30"
}
]
},
{
"featureType": "road.local",
"elementType": "all",
"stylers": [
{
"lightness": "40"
}
]
},
{
"featureType": "transit",
"elementType": "all",
"stylers": [
{
"saturation": -100
},
{
"visibility": "simplified"
}
]
},
{
"featureType": "water",
"elementType": "geometry",
"stylers": [
{
"hue": "#ffff00"
},
{
"lightness": -25
},
{
"saturation": -97
}
]
},
{
"featureType": "water",
"elementType": "labels",
"stylers": [
{
"lightness": -25
},
{
"saturation": -100
}
]
}
]
//↑ここまで↑
});
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap"
async defer></script>
<style>
/* Always set the map height explicitly to define the size of the div
* element that contains the map. */
#map {
height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html, body {
height: 100%;
margin: 0;
padding: 0;
}
</style>
２）API KEYの取得
下記より「キーの取得」ボタンを押すとAPI KEYの取得が可能です。
３）API KEYを入力
下記の箇所の「YOUR_API-KEY」の部分を、２）で取得したAPI KEYに差し替えます
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap"
async defer></script>
４）Snazzy Mapsにアクセスし、好みの地図デザインを選ぶ。
５）JAVASCRIPT STYLE ARRAYの下を全てコピーし、上述の"stylers": の後から差し替える。
６）緯度・経度を変更する
現状のタグは辻堂にポイントされているので、下記のタグを必要に応じて書き換えてください。
latとlngは下記のサイトで確認できます。
Googleマップで緯度・経度を求める
lat:35.336292, lng:139.444951
７）プレビューしてみる
以上、無料で簡単にGoogleMapのカスタマイズをできる方法のご案内でした。
参考になりましたら幸いです。