SNAZZY MAPSを使用してgoogleマップをカスタマイズする方法 | KH-WEBLOG

SNAZZY MAPSを使用してgoogleマップをカスタマイズする方法

SNAZZY MAPSを使用してgoogleマップの見た目をカスタマイズする方法をメモ。

＜head＞内に

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

を追加

YOUR_API_KEYの箇所は自分のgoogle map APIキーを入れます。

HTML内のマップを表示したい箇所に

<div id="map"></div>

を追加

下記のjsを追加

	
<script>
function initMap()
{
    var latlng = {lat: 35.949822, lng: 139.994198}; // 経度・緯度
    var map = new google.maps.Map(document.getElementById('map'),{
        // 基本設定
        center: latlng,
        zoom: 12,
        styles: 
//ここからコピー
          [{"featureType":"landscape","stylers":[{"hue":"#FFBB00"},{"saturation":43.400000000000006},{"lightness":37.599999999999994},{"gamma":1}]},{"featureType":"road.highway","stylers":[{"hue":"#FFC200"},{"saturation":-61.8},{"lightness":45.599999999999994},{"gamma":1}]},{"featureType":"road.arterial","stylers":[{"hue":"#FF0300"},{"saturation":-100},{"lightness":51.19999999999999},{"gamma":1}]},{"featureType":"road.local","stylers":[{"hue":"#FF0300"},{"saturation":-100},{"lightness":52},{"gamma":1}]},{"featureType":"water","stylers":[{"hue":"#0078FF"},{"saturation":-13.200000000000003},{"lightness":2.4000000000000057},{"gamma":1}]},{"featureType":"poi","stylers":[{"hue":"#00FF6A"},{"saturation":-1.0989010989011234},{"lightness":11.200000000000017},{"gamma":1}]}]
//ここまでコピー
    });
    // マーカーを表示
    var marker = new google.maps.Marker({
        position: latlng,
        map: map,
		icon: 'img/mark.png',
        title: '株式会社○○'
    });
}
</script>	

上記ソースのstyles:以下の部分に
SNAZZY MAPS内の表示させたいデザインのコードをコピーペースト。

位置の調整

var latlng = {lat: 35.949822, lng: 139.994198};

の部分に経度、緯度を指定

マーカー画像の変更

icon: ‘img/mark.png’

部分に独自の画像パスを指定