GoogleMapをカスタマイズできるサイト「SNAZZY MAP」の使い方

GoogleMapを簡単にカスタマイズできるサイト「SNAZZY MAP」をご紹介します。

「SNAZZY MAP」は下記のようなさまざまなデザインのGoogleMapを作成できるサイトです。

カスタマイズには、Google Maps APIの設定は必要ですが、基本的にコピペでOKです。

使用方法は下記になります。

1)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>

 

2)API KEYの取得

下記より「キーの取得」ボタンを押すとAPI KEYの取得が可能です。

Google Maps API

 

3)API KEYを入力

下記の箇所の「YOUR_API-KEY」の部分を、2)で取得したAPI KEYに差し替えます

<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap"
async defer></script>

 

4)Snazzy Mapsにアクセスし、好みの地図デザインを選ぶ。

 

5)JAVASCRIPT STYLE ARRAYの下を全てコピーし、上述の"stylers": の後から差し替える。

 

6)緯度・経度を変更する

現状のタグは辻堂にポイントされているので、下記のタグを必要に応じて書き換えてください。
latとlngは下記のサイトで確認できます。
Googleマップで緯度・経度を求める

lat:35.336292, lng:139.444951

 

7)プレビューしてみる

 

以上、無料で簡単にGoogleMapのカスタマイズをできる方法のご案内でした。

参考になりましたら幸いです。