前回 はGoogle MapをAPI経由で埋め込みましたが、今回は読み込んだマップの色を変えてみたいと思います。
Google Mapn のスタイルは http://gmaps-samples-v3.googlecode.com/svn/trunk/styledmaps/wizard/index.html でプレビューしながら変更可能です。ひと通り編集したら右下にある「Show JSON」を押すとスタイルがJSONになるのでソースにコピペすればOKです。
そんなこんなで今回は色をモノクロにしてみようと思います。
JavaScript
(function(win, doc) { "use strict"; init(); function init() { var google = win.google, elm = doc.getElementById("gmap"), mapOptions = { zoom: 15, disableDefaultUI: true, mapTypeId: google.maps.MapTypeId.ROADMAP }, styles = [ { "stylers": [ {"saturation": -100} ] } ], map = new google.maps.Map(elm, mapOptions), geocoder = new google.maps.Geocoder(), STYLE_NAME = "monochrome"; map.mapTypes.set(STYLE_NAME, new google.maps.StyledMapType(styles, {name: STYLE_NAME})); map.setMapTypeId(STYLE_NAME); geocoder.geocode({ "address": "マリンスタジアム" }, function(results, status){ if (status === google.maps.GeocoderStatus.OK) { map.setCenter(results[0].geometry.location); } }); } })(this, document);
DEMO
しっかりモノクロになりました。
今回は以上です。