Search

Google Maps JavaScript API v3スタイル付き地図

Google Maps JavaScript API V3

スタイル付き地図

2012/5/20

Google Maps JavaScript API V3 のマップ タイプ - スタイル付き地図

スタイル付き地図は、地図上の対象物の色や表示有無などを自由カスタマイズすることができます。 例えば、地図の配色トーンをサイトカラーに合わせたものにしたり、地図上の不要な対象物を非表示にしてシンプルに表示するといったことが可能です。

カスタマイズ方法は2つあります。

  1. デフォルトの地図をスタイリング
  2. スタイル地図タイプを作成

スタイル地図タイプ

2012/5/20

オプションに指定したカスタムスタイルで地図タイプを作成します。

構文

StyledMapType(styles:Array.<MapTypeStyle>, options?:StyledMapTypeOptions)

StyledMapTypeOptions

以下のオプションを指定可能です。

プロパティ説明
alt この地図タイプのボタンが、マウスオーバーされた時に表示するツールチップテキストを指定。
maxZOom この地図タイプが適用されている時の最大ズームレベルを指定。
minZoom この地図タイプが適用されている時の最小ズームレベルを指定。
name 地図タイプコントロールに表示する名前を指定。

MapTypeStyleオブジェクト

どの対象物および対象物内の要素にそれぞれどういったスタイルを適用するのかを指定します。

プロパティ説明
elementType スタイルを適用する要素のタイプを指定。 省略した場合は「all」が適用されます。
featureType スタイルを適用する機能または機能グループを選択。 省略した場合は「all」が適用されます。
stylers セレクタに適用するスタイルルールを配列で指定。 配列に指定されている順序で地図要素に適用されます。

スタイルルールは、以下のような配列になります。

var stylesArray = [
  {
    elementType: 'MapTypeStyleElementType',
    featureType: 'MapTypeStyleFeatureType',
    stylers: [
      {gamma: 0.01～10.0},
      {hue: '#rrggbb'},
      {inverse_lightness: true or false},
      {lightness: -100～100},
      {saturation: -100～100},
      {visibility: 'on' or 'off' or 'simplifed'}
    ]
  },
  {
    featureType: '',
    // etc...
  }
]
var latlng=new google.maps.LatLng(35.65861,139.745447);
var myOptions = {
	zoom: 14,
	center: latlng,
	mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map=new google.maps.Map(document.getElementById("map_canvas"), myOptions);
map.setOptions({styles: stylesArray});

MapTypeStyleElementType

スタイルを適用する対象物内の要素を選択します。
省略した場合は、allが適用されます。

定数説明
all その対象物のすべての要素を選択。デフォルト。
geometry その対象物の幾何学要素のみ選択。
labels その対象物に関連付けられたテキストラベルのみ選択。

MapTypeStyleFeatureType

スタイルを適用する地図上の対象物を指定します。
省略した場合は、allが適用されます。

※ドット表記
road.localなどドット表記のものがあります。 この場合、roadが親要素、localが子要素という意味合いになります。 道路全体に適用したい場合は「road」、地方道路や高速道路だけに適用させたい場合は、road.local、road.highwayなどの子要素で個別にルールを指定します。

定数説明
administrative 行政区分
administrative.country 国
administrative.land_parcel 土地区画
administrative.locality 地域
administrative.neighborhood 近所
administrative.province 地方
all 全セレクタタイプ
landscape 景観
landscape.man_made 人工景観
landscape.natural 自然景観
poi 誰かが興味をもった場所
poi.attraction 観光スポット
poi.business ビジネス
poi.government 行政施設
poi.medical 緊急サービス（病院、薬局、警察、医者など）
poi.park 公園
poi.place_of_worship 教会、寺院
poi.school 学校
poi.sports_complex スポーツ施設
road 道路
road.arterial 幹線道路
road.highway 高速道路
road.highway.controlled_access 出入りの管理された高速道路
road.local 地方道路
transit 駅
transit.line 交通機関の路線
transit.station 駅
transit.station.airport 空港
transit.station.bus バス停
transit.station.rail 鉄道駅
water 海、湖、池や川など見ずのあるところ

MapTypeStyler

色相、色、明るさ/ガンマ値の組み合わせて表示色を定義したり、各対象物の表示非表示を指定します。

プロパティ説明
gamma 地図上の要素のコントラストを指定。
指定可能な値は、0.01（低コントラスト）～10.0（高コントラスト）の数値。
デフォルトは1.0（ガンマ補正なし）。
hue 基本色を#RRGGBB形式で指定。
inverse_lightness 要素の明るさを反転するかの有無を指定。
trueを指定すると、色相と彩度を維持しつつ既存の明るさを反転します。
デフォルトはfalse（反転しない）。
lightness 要素の明度を指定。
指定可能な値は、-100～100の数値。数値が大きいほど明るくなります。
デフォルトは0。
saturation 要素に適用する基本色の彩度を指定。
指定可能な値は、-100～100。数値が大きいほど鮮やかになります。
デフォルトは0。
visibility 要素を地図上に表示するかの有無を指定。
指定可能な値は、「on」「off」「simplifed」のいずれか。

設置サンプル

選択した対象物の親・子要素にスタイルルールを適用するサンプルです。

設置サンプルサンプルを見る
<!DOCTYPE>
<html lang="ja">
<head>
    <meta charset="utf-8" />
    <title>設置サンプル</title>
    <link rel="stylesheet" type="text/css" href="/content/css/gmapv3.css" />
    <!-- スマートフォン向けviewportの指定 -->
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <!-- Google Maps APIの読み込み -->
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
    <script type="text/javascript">
        var map;
        /* スタイル */
        var stylesArray = [
            {
                stylers: [
                    {hue: '#ff6699'},
                    {saturation:-20},
                    {lightness:10}
                ]
            }
        ];
        function initialize() {
            /* 東京タワー */
            var latlng=new google.maps.LatLng(35.65861,139.745447);
            /* 地図のオプション設定 */
            var myOptions = {
                /*初期のズーム レベル */
                zoom: 14,
                /* 地図の中心点 */
                center: latlng,
                /* 地図タイプ */
                mapTypeId: google.maps.MapTypeId.ROADMAP
            };
            /* 地図生成 */
            map=new google.maps.Map(document.getElementById("map_canvas"), myOptions);
            review();
        }
        function review(){
            var ftObj=document.getElementById("ft");
            var etObj=document.getElementById("et");
            var ft_idx=ftObj.options.selectedIndex;
            var et_idx=etObj.options.selectedIndex;
            stylesArray[0].featureType=ftObj.options[ft_idx].value;
            stylesArray[0].elementType=etObj.options[et_idx].value;
            console.log(stylesArray);
            map.setOptions({styles: stylesArray});
        }
        /* ロード時に初期化 */
        google.maps.event.addDomListener(window, 'load', initialize);
    </script>
    <style type="text/css">
        #map_canvas { width:100%; height:100%; }
    </style>
</head>
<body>
    <form>
        <p>以下で対象物およびその対象物内の要素にスタイルを適用します。</p>
        <label for="ft">対象物：</label>
        <select id="ft" name="ft">
            <option value="administrative">administrative</option>
            <option value="administrative.country">administrative.country</option>
            <option value="administrative.land_parcel">administrative.land_parcel</option>
            <option value="administrative.locality">administrative.locality</option>
            <option value="administrative.neighborhood">administrative.neighborhood</option>
            <option value="administrative.province">administrative.province</option>
            <option value="all" selected>all</option>
            <option value="landscape">landscape</option>
            <option value="landscape.man_made">landscape.man_made</option>
            <option value="landscape.natural">landscape.natural</option>
            <option value="poi">poi</option>
            <option value="poi.attraction">poi.attraction</option>
            <option value="poi.business">poi.business</option>
            <option value="poi.government">poi.government</option>
            <option value="poi.medical">poi.medical</option>
            <option value="poi.park">poi.park</option>
            <option value="poi.place_of_worship">poi.place_of_worship</option>
            <option value="poi.school">poi.school</option>
            <option value="poi.sports_complex">poi.sports_complex</option>
            <option value="road">road</option>
            <option value="road.arterial">road.arterial</option>
            <option value="road.highway">road.highway</option>
            <option value="road.highway.controlled_access">road.highway.controlled_access</option>
            <option value="road.local">road.local</option>
            <option value="transit">transit</option>
            <option value="transit.line">transit.line</option>
            <option value="transit.station">transit.station</option>
            <option value="transit.station.airport">transit.station.airport</option>
            <option value="transit.station.bus">transit.station.bus</option>
            <option value="transit.station.rail">transit.station.rail</option>
            <option value="water">water</option>
        </select>
        <label for="et">対象物内の要素：</label>
        <select id="et" name="et">
            <option value="all">all</option>
            <option value="geometry">geometrys</option>
            <option value="labels" selected>labels</option>
        </select>
        <input type="button" id="btn" name="btn" value="適用" onclick="review()" />
    </form>
    <div id="map_canvas"><!-- 地図の埋め込み表示 --></div>
</body>
</html>

カスタマイズ方法：デフォルトの地図をスタイリングする

2012/5/20

デフォルトの地図のオプション似スタイルを追加して、地図をスタイリングする例です。

地図オプションオブジェクトのスタイルプロパティを指定することで地図タイプのスタイルを変更できます。 デフォルトの地図タイプのスタイルを変更するには、地図オプションにスタイル配列を指定します。

設置サンプルサンプルを見る
<!DOCTYPE>
<html lang="ja">
<head>
    <meta charset="utf-8" />
    <title>設置サンプル</title>
    <link rel="stylesheet" type="text/css" href="/content/css/gmapv3.css" />
    <!-- スマートフォン向けviewportの指定 -->
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <!-- Google Maps APIの読み込み -->
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
    <script type="text/javascript">
        function initialize() {
            /* スカイツリー */
            var latlng=new google.maps.LatLng(35.710058,139.810718);
            /* 地図のオプション設定 */
            var myOptions = {
                /*初期のズーム レベル */
                zoom: 18,
                /* 地図の中心点 */
                center: latlng,
                /* 地図タイプ */
                mapTypeId: google.maps.MapTypeId.ROADMAP
            };
            /* スタイル配列 */
            var stylesArray = [
                /* 幾何学要素 */
                {
                    featureType:"all",
                    elementType:"geometry",
                    stylers: [
                        {hue: '#d9acfb'},
                        {visibility:"on"},
                        {saturation:0},
                        {lightness:50}
                    ]
                },
                /* ラベル */
                {
                    featureType:"all",
                    elementType:"labels",
                    stylers: [
                        {hue: '#d9acfb'},
                        {visibility:"on"},
                        {saturation:0},
                        {lightness:30}
                    ]
                },
                /* 観光スポット */
                {
                    featureType:"poi.attraction",
                    elementType:"all",
                    stylers: [
                        {hue: '#ff6699'},
                        {saturation:100},
                        {lightness:20}
                    ]
                }
            ];
            /* 地図生成 */
            var map=new google.maps.Map(document.getElementById("map_canvas"), myOptions);
            /* オプションでスタイル追加 */
            map.setOptions({styles: stylesArray});
        }
        /* ロード時に初期化 */
        google.maps.event.addDomListener(window, 'load', initialize);
    </script>
</head>
<body>
    <div id="map_canvas"><!-- 地図の埋め込み表示 --></div>
</body>
</html>

カスタマイズ方法：スタイル地図タイプで生成する

2012/5/20

スタイル地図タイプを作成して、スタイル地図を生成する例です。
以下は地図上の幾何学要素とラベルを紫に、観光スポットをピンクでハイライトしています。

設置サンプルサンプルを見る
<!DOCTYPE>
<html lang="ja">
<head>
    <meta charset="utf-8" />
    <title>設置サンプル</title>
    <link rel="stylesheet" type="text/css" href="/content/css/gmapv3.css" />
    <!-- スマートフォン向けviewportの指定 -->
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <!-- Google Maps APIの読み込み -->
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
    <script type="text/javascript">
        /* スタイル配列 */
        var stylesArray = [
            /* 幾何学要素 */
            {
                featureType:"all",
                elementType:"geometry",
                stylers: [
                    {hue: '#d9acfb'},
                    {visibility:"on"},
                    {saturation:0},
                    {lightness:50}
                ]
            },
            /* ラベル */
            {
                featureType:"all",
                elementType:"labels",
                stylers: [
                    {hue: '#d9acfb'},
                    {visibility:"on"},
                    {saturation:0},
                    {lightness:30}
                ]
            },
            /* 観光スポット */
            {
                featureType:"poi.attraction",
                elementType:"all",
                stylers: [
                    {hue: '#ff6699'},
                    {saturation:100},
                    {lightness:20}
                ]
            }
        ];
        function initialize() {
            /* 地図タイプID */
            var myMaptypeId="skytree";
            /* スカイツリー */
            var latlng=new google.maps.LatLng(35.710058,139.810718);
            /* 地図のオプション設定 */
            var myOptions = {
                /*初期のズーム レベル */
                zoom: 17,
                /* 地図の中心点 */
                center: latlng,
                /* 地図タイプ */
                mapTypeControlOptions: {
                   mapTypeIds: [google.maps.MapTypeId.ROADMAP, myMaptypeId]
                },
                mapTypeId:myMaptypeId
            };
            /* 地図生成 */
            var map=new google.maps.Map(document.getElementById("map_canvas"), myOptions);
            /* スタイル付き地図 */
            var styledMapOptions = {
                /* ボタンにマウスオーバーした時のツールチップ */
                alt: "ハイライト表示",
                /* 最大ズームレベル */
                maxZoom: 20,
                /* 最小ズームレベル */
                minZoom: 17,
                /* ボタンに表示する名前 */
                name: "スカイツリー"
            };
            var myMapType = new google.maps.StyledMapType(stylesArray, styledMapOptions);
              map.mapTypes.set(myMaptypeId, myMapType);
          }
        /* ロード時に初期化 */
        google.maps.event.addDomListener(window, 'load', initialize);
    </script>
</head>
<body>
    <div id="map_canvas"><!-- 地図の埋め込み表示 --></div>
</body>
</html>

関連コンテンツ

Q. このサイトの情報はお役に立ちましたでしょうか？

投票する 投票結果を見る

管理人に【web拍手】を送るweb拍手（1行メッセージも送れます♪）

TOP / ご利用上の注意点 / リンクについて / RSS

Valid: HTML検証, CSS検証, RSS検証

Thanks: Material Design 420 free icons

©2023 PHP & JavaScript Room All Rights Reserved.

pagetop

polarized women