ホームページにGoogleマップを載せたい時は、
Google → マップ → 設定 → 地図を埋め込む
で、埋め込みコードをコピーして貼り付ければできます。
ホームページのテイストに合わせてGoogleマップを少し装飾したいときには、Google Map API を利用します。
以前の記事では、埋め込んだGoogleマップのピンの画像を変更するやり方について書きました。
今回は、Googleマップの見た目自体を装飾するやり方です。
地図のスタイルを変更するというやり方で、Googleマップをカスタマイズできます。
例えば上記のような白黒の地図も設定可能です。
具体的には次のようにしています。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 | ・・・ <script type="text/javascript" src="//maps.google.com/maps/api/js?sensor=false"></script> <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script type="text/javascript"> google.maps.event.addDomListener(window, 'load', function() { // BRISK の位置 var briskLatLng = new google.maps.LatLng(35.68869, 139.814157); // オプションの指定 var mapOptions = { zoom: 16, // 地図の初期表示の拡大率 center: briskLatLng, // 地図の中心点の座標（緯度・経度） mapTypeId: google.maps.MapTypeId.ROADMAP // MAPタイプの指定 }; // MAPオブジェクトの作成 var mapObj = new google.maps.Map(document.getElementById('brisk-map'), mapOptions); // MARKERイメージを作成 markerImg = new google.maps.MarkerImage( "/images/blog/brisk-logo.png", // アイコン画像のパス new google.maps.Size(50, 60), // アイコン画像の表示させたい範囲（サイズ） new google.maps.Point(0, 0), // アイコン画像の表示させたい範囲の基準点（左上） new google.maps.Point(25, 60), // アイコン画像内のアンカー点の位置 new google.maps.Size(50, 60) // アイコン画像の実際の表示サイズ ); // MARKERオブジェクトを作成 markerObj = new google.maps.Marker({ position: briskLatLng, // アイコンのアンカー点の緯度・経度 map: mapObj, // 上で作成したMAPオブジェクトを指定 icon: markerImg // 上で作成したMARKERイメージを指定 }); /*** スタイルに関しての設定 start ***/ // 白黒用スタイル var stylez = [ { featureType: "all", elementType: "all", stylers: [ { saturation: -100 } ] } ]; // スタイルをマップにセット var styledMapOptions = { map: mapObj, name: "brisk-map" } var styledMapType = new google.maps.StyledMapType(stylez,styledMapOptions); mapObj.mapTypes.set('mono', styledMapType); mapObj.setMapTypeId('mono'); /*** スタイルに関しての設定 end ***/ }); </script> ・・・ <div id="brisk-map" class="brisk-map"></div> |
簡単に言うと、Googleマップの見え方を自分好みのスタイルに変更する、
ということをやっています。
上記のコードで「白黒用スタイル」のところでは、
Googleマップ全体の彩度を通常の数値から「-100%」に設定する、ということをやっています。
スタイル変更に関係しているのは、上記のソースのうち、以下の部分です。
1 2 3 4 5 6 7 8 9 10 11 12 | ・・・ // 白黒用スタイル var stylez = [ { featureType: "all", elementType: "all", stylers: [ { saturation: -100 } ] } ]; ・・・ |
●「featureType: “all”」 は、スタイルを適用する対象です。ここでは「全て」を設定していますが、「道」、「建物」「県境」、など、いろいろと指定できます。詳しくは、公式ドキュメント featureTypeの設定をご覧ください。
●「elementType: “all”」 は、対象の中の要素です。例えば、「建物」の「テキスト」だけ、や「アイコン」だけ、といった指定ができます。詳しくは公式ドキュメント elementTypeの設定です。
●「stylers: [ { saturation: -100 } ] 」 が、設定したいスタイルです。上記では、「saturation」つまり「彩度」を「-100%」に設定して、白黒を実現しています。項目を中括弧{} で囲ってカンマで区切って複数指定することもできます。指定できる項目には、「基本色」や「輝度」、「コントラスト」などを設定できます。詳しくはこちら。
これらを応用するといろんなGoogleマップを見せることができます。
色を反転させて夜間モードみたいに。
1 2 3 4 5 6 7 8 9 10 11 12 13 | ・・・ // 夜っぽいマップ var stylez = [ { featureType: "all", elementType: "all", stylers: [ { saturation: 50 }, { invert_lightness: true } ] } ,{ featureType: "road.arterial", elementType: "geometry", stylers: [ { color: '#ffee22' } , { saturation: -40 }, { invert_lightness: false }, {lightness: -20 } ] } ,{ featureType: "road.local", elementType: "geometry", stylers: [ { color: '#ddcc11' } , { saturation: -50 }, { invert_lightness: false }, {lightness: -20 } ] } ,{ featureType: "road", elementType: "labels.text", stylers: [ { color: '#cccccc' } , { saturation: -50 }, { invert_lightness: false }, {lightness: -20 } ] } ,{ featureType: "road", elementType: "labels.text.fill", stylers: [ { color: '#ffaaaa' } , { saturation: -20 }, { invert_lightness: false }, {lightness: -20 } ] } ,{ featureType: "road", elementType: "labels.text.stroke",stylers: [ { color: '#111111' } , { saturation: -50 }, { invert_lightness: false }, {lightness: -20 } ] } ]; ・・・ |
地名などを少なくしてすっきり見せる。
1 2 3 4 5 6 7 8 9 10 11 | ・・・ // すっきりマップ var stylez = [ { featureType: "all", elementType: "labels", stylers: [ { visibility: 'off' } ] } ,{ featureType: "poi.park", elementType: "labels", stylers: [ { visibility: 'on' } ] } ,{ featureType: "transit.station", elementType: "labels", stylers: [ { visibility: 'on' } ] } ,{ featureType: "poi.government", elementType: "labels", stylers: [ { visibility: 'on' } ] } ]; ・・・ |
ベースの色を指定してサイトに合わせる。
1 2 3 4 5 6 7 8 | ・・・ // 赤っぽいマップ var stylez = [ { featureType: "all", elementType: "geometry", stylers: [ { hue: '#b31d23'}, { saturation: -30 }, { lightness: -5 } ] } ]; ・・・ |
・・・などなど。いろいろと試してみるのも面白いかもしれないです。
南本貴之
