みかづきブログ その3

3ヶ月つづけてみました。

GoogleMapをAPIで埋め込む(色変更バージョン)

前回Google MapをAPI経由で埋め込みましたが、今回は読み込んだマップの色を変えてみたいと思います。

Google Mapn のスタイルは Google Maps API Styled Map Wizard でプレビューしながら変更可能です。ひと通り編集したら右下にある「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



しっかりモノクロになりました。
今回は以上です。