HDRiな生活

HDR（ハイダイナミックレンジ）写真の連載。ストックフォトでカメラ機材代の捻出を目論む。

Google Maps でスタイリッシュな白黒地図を作成する

Google Maps でスタイリッシュな白黒地図を作成する

カメラ:D700、 レンズ:SIGMA 20mm F1.8 EX DG、ISO:200、絞り優先、ブラケット:-2〜+2、ホワイトバランス:オート

関連写真

  • Sagrada Família over there@バルセロナ
  • La Sagrada Família ver. 2011
  • 200円で Google マップを 3D 化させる方法
  • Google リーダーと iGoogle 廃止に伴い代替サービスを探し辿り着いた先 netvibes
  • 売れるストックフォト、国内と海外の違い
  • ウルワツ寺院のひとかど@バリ

店舗のwebサイトに必ず必要なコンテンツのひとつ、店舗地図。もちろん既存の Google Maps がデファクトスタンダードになっているので、閲覧者の使い勝手を第一にするならば是非も無くデフォルトでお願いしたいのですが。
ただ、どうしてもサイトの色調とバッティングしてしまう時があります。ブランディングに関わることもあるでしょうし、そんなときに以下の手順で白黒ピシっと作れちゃうのでおすすめです。

<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.681848, 139.757996); 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: "off" }]}, { featureType: "landscape",stylers: [{ visibility: "off" }]}, { featureType: "poi",stylers: [{ visibility: "off" }]}, { featureType: "water",elementType: "labels",stylers: [{ visibility: "off" }]}, { featureType: "water",stylers: [{ saturation: -100 }]}, { featureType: "road",elementType: "labels",stylers: [{ visibility: "off" }]}, { featureType: "road",stylers: [{ saturation: -100 },{ lightness: 100 }]}, { featureType: "landscape",stylers: [{ saturation: -100 },{ lightness: -10 }]} ]; var mapOptions = { zoom: 15, 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'); //囲まれたエリアの作成・塗りつぶし var centraal; var rectangleCoords = [ new google.maps.LatLng(35.680101, 139.753959), new google.maps.LatLng(35.678706, 139.749818), new google.maps.LatLng(35.683377, 139.745333), new google.maps.LatLng(35.68831, 139.747017), new google.maps.LatLng(35.68783, 139.752602), new google.maps.LatLng(35.683822, 139.755377), new google.maps.LatLng(35.680101, 139.753959) ]; centraal = new google.maps.Polygon({ paths: rectangleCoords, strokeColor: "#cc5200", strokeOpacity: 0.3, strokeWeight: 3, fillColor: "#ff6600", fillOpacity: 0.3 }); centraal.setMap(map); } //--> </script> <div id="map_canvas" style="width: 640px; height: 480px;"></div> </body>

特定の場所を矩形で囲む（ポリゴンのオプション）、変更できる色、表示・非表示の仕様は MapTypeStyleFeatureType オブジェクトを参照してください。

もちろんプロパティいじればカラフルな地図も作製できるので、サイトのベースカラーに合わせて作成する事も可能です。すごくいい感じ。

撮影環境・雑多品

Carl Zeiss Planar T* 50mm F1.4

基本を習得するべく戒めに買ったレンズ。マニュアルピントのみなので、乗りこなすのが少し難しいぶん、今では一番愛着のあるレンズ。黒の粘り気がお気に入りで、白黒写真専用の別サイトを立ち上げてしまう。

関連記事

コメント： 0