白黒のGoogleマップを出力したい。と言われたので調べてみた。
サイトのデザインの問題でGoogleマップを白黒のもを出したいときってありますよね。
どうやら出来そうだ。
googlemapのjsを呼び出す際に、パラメータで色のこさを変更することで出来る。
Google Maps でスタイリッシュな白黒地図を作成する – HDRiな生活
http://hdri.iwalk.jp/2011/12/building328.php
こちらを参考に
白黒を作成するのでほとんどの要素を saturation:-100 に設定
他の要素も邪魔だから取りたいと言われそうなのでこちらのドキュメントも読んで置くといいかも
Googleマップをイラストマップみたいにしたい。
http://lopan.jp/google-map-customize/
こちらの記事では、+や-など拡大の要素を排除する方法や
オブジェクトを置く方法も説明している。
文章量が多いので簡単に説明すると
Google map APIを読み込むには、
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script> |
こちらのjsを読み込むことで 動くようになる。
更に、どこの座標のものを出すかという jsを加え
このjsには、パラメータが色々設定されているのでその部分をいじってあげることで色々出来るよってことです。
座標を調べる方法
任意の場所の緯度と経度の取得方法 – Google Maps API入門
http://www.ajaxtower.jp/googlemaps/gmap2/index4.html
作ってみたサンプル
<!doctype html> <html lang="ja"><head></head> <script src="http://maps.google.com/maps/api/js?sensor=true"></script> <body onload="initialize()"> <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script> <script> <!-- var map; var tokyo = new google.maps.LatLng(35.6751693,139.7609672); function initialize() { //地図上の各要素の設定。白黒を作成するのでほとんどの要素を saturation:-100 に設定。 //不要な情報は非表示（visibility: "off"）にしちゃう //色の濃さは lightnessプロパティで変更する。 var stylez = [ { featureType:"transit.station",stylers:[{visibility: "off" }]}, { featureType: "transit",stylers: [{ saturation: -100 }]}, { featureType: "transit",elementType: "labels",stylers: [{ saturation: -100 }]}, { featureType: "administrative",stylers: [{ visibility: "on" }]}, { featureType: "landscape",stylers: [{ visibility: "on" }]}, { featureType: "poi",stylers: [{ visibility: "off" }]}, { featureType: "water",elementType: "labels",stylers: [{ visibility: "on" }]}, { featureType: "water",stylers: [{ saturation: -100 }]}, { featureType: "road",elementType: "labels",stylers: [{ visibility: "on" }]}, { featureType: "road",stylers: [{ saturation: -100 },{ lightness: 100 }]}, { featureType: "landscape",stylers: [{ saturation: -100 },{ lightness: -10 }]} ]; var mapOptions = { zoom: 17, center: tokyo }; map = new google.maps.Map(document.getElementById("map_canvas"),mapOptions); var styledMapOptions = { map: map, name: "Hip-Hop" } var jayzMapType =new google.maps.StyledMapType(stylez,styledMapOptions); map.mapTypes.set('hiphop', jayzMapType); map.setMapTypeId('hiphop'); centraal.setMap(map); } //--> </script> <div id="map_canvas" style="width: 1024px; height: 400px;"></div> </body> </html> |
白黒のGoogleマップを出力したい。と言われたので調べてみた。 is a post from: @attrip (アットトリップ）