Google Map APIで細かい指定をする

グーグルマップAPIを使って表示するときに細かい指定(マップカラーなど)をしたい場合に使う時の備忘録。

APIを

内に入れる。

<script src="//maps.google.co.jp/maps/api/js?sensor=false&amp;language=ja&amp;region=jp"></script>

googlemap.js

(function(){
  $.fn.maps = function(gLat, gLng){
    var div = $(this).get(0),
    options = {
      zoom: 15,
      center: new google.maps.LatLng(gLat,gLng),
      mapTypeId: google.maps.MapTypeId.ROADMAP,
      scrollwheel: true,
      scaleControl: true,
      panControl: true,
      zoomControl: true,
      mapTypeControl: true,
      streetViewControl: true,

      panControlOptions: {
        position: google.maps.ControlPosition.TOP_LEFT
      },
      zoomControlOptions: {
        position: google.maps.ControlPosition.TOP_LEFT
      },
      mapTypeControlOptions: {
        position: google.maps.ControlPosition.TOP_RIGHT
      },

      styles: [{
        stylers: [
          {hue: "#ffffff"},
          {gamma: 0},         //ガンマ値(コントラスト)：-10〜1
          {lightness: 0},      //明度：-100〜100
          {saturation: 0},  //彩度：-100〜100
          {inverse_lightness: false}  //明るさの反転
        ]
      }]
    };
    var map = new google.maps.Map(div, options);

    var marker = new google.maps.Marker({
      position: options.center,
      icon: {
        url: 'url'
      },
      map: map
    });
  }
})(jQuery);