豚を丸焼きにするイベントで日焼けしました。ago（@kyo_ago）です。
すでにだいぶ時間がたってますが、7/7に弊社コーポレートサイトのリニューアルを行いました。
その際会社までの道順を紹介するページでGoogle Mapのデザインを変更したのでその方法をご紹介したいと思います。
StyledMapType
Google Map Ver3以降はStyledMapTypeというAPIが追加されており、このStyledMapTypeを使うことで地図上の指定された要素に対して独自の色情報を設定することができます。
色の変更方法
色を変更するにはStyledMapType API経由で以下のようにJavaScriptのObjectを渡すことで実現できます。
var styles = [
{
// 色を変更する対象の指定（document参照）
featureType: "road.local",
// 色を変更するクラスの指定（document参照）
elementType: "geometry",
// 色の指定
stylers: [ { hue: "#00ff00" } ]
}
];
var colorName = 'MyColor';
var mapOptions = {
zoom: 11,
center: new google.maps.LatLng(40.6743890, -73.9455),
mapTypeControlOptions: {
mapTypeIds: [colorName, google.maps.MapTypeId.ROADMAP]
}
};
var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
map.mapTypes.set(colorName, new google.maps.StyledMapType(styles, { name: colorName }));
map.setMapTypeId(colorName);
基本的には上記のコードをのようにObjectを設定しますが、コードを変更しながらの調整は大変なのでGoogle Maps API Styled Map Wizardも用意されています。
ただ、Google Maps API Styled Map Wizardでは「色の直接指定ができない」、「対象要素の指定が英語なのでわかりにくい」、「各種値を直接変更できない」などの問題があったので、jsdo.it上で各種値を直接変更できるコードを作成しました。
Google Maps API Styled Map Wizard（改） - jsdo.it - share JavaScript, HTML5 and CSS
html5 formを使用しているため、Firefox5だとスライドバーが表示されません。 (Chromeで御覧ください)
Google Mapの色を変えたい場合使ってみてください。
