KH-WEBLOG TOP > WEBメモ > JavaScript > SNAZZY MAPSを使用してgoogleマップをカスタマイズする方法

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’

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

TAGS

.htaccess ActionScript All in one seo pack Contact Form 7 CSS CSS3 EC-CUBE Flash HTML5 JavaScript jQuery LightBox PHP SEO WordPress アイキャッチ画像 アクセス解析 カテゴリー カラーミーショップ カート コメント ショートコード ソースコード タグ テンプレートタグ ドロップダウンメニュー パンくずリスト パーマリンク ビジュアルエディタ フォーム フルスクリーン プラグイン ページテンプレート ページナビ ページ分割 マウスイベント リダイレクト リンク レンタルサーバー ロールオーバー 携帯サイト 条件分岐 正規表現 角丸 関連記事