Blog

HOME > Web > Googleマップ > 【Javascript】Google Mapsを白黒で表示

【Javascript】Google Mapsを白黒で表示

2017/05/13

Googleマップ javascript

備忘録です。

オリジナルマーカー表示に続いてMapを白黒で表示する方法です。

こんな感じです。

参考サイト
GoogleMapをカスタムしてグレースケール&オリジナル画像マーカーの地図を作る方法

下記を追加

// 地図をグレースケールに
    var mapStyle = [
      {
          "stylers": [
            { "saturation": -100 }
          ]
      }
    ];
var mapType = new google.maps.StyledMapType(mapStyle);
map.mapTypes.set('GrayScaleMap', mapType);
map.setMapTypeId('GrayScaleMap');

var mapStyle = [
  {
      "stylers": [
        { "saturation": -100 }
      ]
  }
];

この部分で地図のデザインを指定しています。
「saturation」は「彩度」という意味で、この値によって色の鮮やかさが変わります。「-100」が一番小さい値で、この最低値を指定することで地図がグレースケールになります。

先日のマーカー変更に追加すると下記のようになります。

<script>
  function initialize() {
  var latlng = new google.maps.LatLng(34.705629, 135.510118);
  var myOptions = {
    zoom: 18, /*拡大比率*/
    center: latlng, 
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };
  var map = new google.maps.Map(document.getElementById('access_map'), myOptions);
 
  //アイコンを作成
  var icon = new google.maps.MarkerImage('/images/marker.png',
    new google.maps.Size(104,120),/*アイコンサイズ設定*/
    new google.maps.Point(0,0),  // origin
    new google.maps.Point(60,100) // anchor
    );
  var markerOptions = {
    position: latlng,
    map: map,
    icon: icon,
    title: '場所名など'
  };
  var marker = new google.maps.Marker(markerOptions);
  //アイコン設定はここまで
 
  //吹き出しを作成
   var contentString = '<h3 class="map_title">ココはとある場所</h3>' +
                    '<p class="map_comment">位置に特に意味はありません</p>';
   var infowindow = new google.maps.InfoWindow({
       content: contentString  //吹き出し内コメント
    });
 
 
    //吹き出しをオープン
    infowindow.open(map,marker);
 
 
    //マーカーをクリックすれば吹き出しが再表示
    google.maps.event.addListener(marker, 'click', function() {
        infowindow.open(map,marker);
    });
 
  //マーカーを中心に表示
  google.maps.event.addDomListener(window, "resize", function() {
    var center = map.getCenter();
    google.maps.event.trigger(map, "resize");
    map.setCenter(center);
  });

  //ここから追加
  // 地図をグレースケールに
    var mapStyle = [
      {
          "stylers": [
            { "saturation": -100 }
          ]
      }
    ];
  var mapType = new google.maps.StyledMapType(mapStyle);
  map.mapTypes.set('GrayScaleMap', mapType);
  map.setMapTypeId('GrayScaleMap');

}
</script>

ゼヒトモ内でのプロフィール: ROCKSTREAM, ゼヒトモのホームページ作成・制作サービス, 仕事をお願いしたい依頼者と様々な「プロ」をつなぐサービス

カテゴリー

月間アーカイブ

«前の記事

一覧に戻る

次の記事»

最近の投稿

人気の記事

MORE

ミュージシャンズ・プラザ

神社仏閣ホームーページ制作

ホームページ制作問合せ