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内の表示させたいデザインのコードをコピーペースト。

コーディング・WordPress化作業を代行します

位置の調整

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

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

マーカー画像の変更

icon: ‘img/mark.png’

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

コーディング・WordPress化作業を代行します

JavaScriptのおすすめ参考書

楽天ブックス
¥2,838 (2024/03/25 02:06時点 | 楽天市場調べ)

TAGS

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