google-maps - Google マップのレイヤー効果

Question

div を作成し、Google マップ コードを埋め込みます。

このような：

でも、Googleマップに反映させたい。

しかし、私はGoogle Map Apiを知りません。

簡単な方法やその他の解決策はありますか? ありがとうございました。

Answer 1

マップのスタイルをカスタマイズできます。この場合、おそらく彩度を-100に設定するだけです。

静的マップの場合、URLは次のようになります：http：//maps.googleapis.com/maps/api/staticmap？center = 0,0＆zoom = 2＆format = png＆sensor = false＆size = 640x480＆maptype = roadmap＆style = salt

動的マップの場合は、スタイルを作成してマップオプションに渡すだけです。

var styles = [
  {
    stylers: [
      { saturation: -100 }
    ]
  }
]

var mapOptions = {
  zoom: 12,
  center: new google.maps.LatLng(47.5,-122.5),
  styles : styles
}

var map = map = new google.maps.Map(document.getElementById("map_canvas"),
      mapOptions);

Answer 2

マップのスタイルを設定できるリンクは次のとおりです: http://gmaps-samples-v3.googlecode.com/svn/trunk/styledmaps/wizard/index.html

私はこれをやったばかりで、非常に似ているはずです。

    var styles = [
  {
    "featureType": "road.arterial",
    "stylers": [
      { "color": "#a0a0a0" },
      { "visibility": "on" }
    ]
  },{
    "featureType": "road.highway",
    "stylers": [
      { "color": "#c9c8c8" }
    ]
  },{
    "featureType": "landscape",
    "elementType": "geometry.fill",
    "stylers": [
      { "color": "#e3e3e3" }
    ]
  },{
    "featureType": "road",
    "elementType": "labels.text.fill",
    "stylers": [
      { "color": "#434443" },
      { "visibility": "on" }
    ]
  },{
    "featureType": "road",
    "elementType": "labels.icon",
    "stylers": [
      { "visibility": "off" }
    ]
  },{
    "featureType": "water",
    "elementType": "geometry.fill",
    "stylers": [
      { "color": "#f7f9fb" }
    ]
  },{
    "featureType": "road",
    "elementType": "labels.text.stroke",
    "stylers": [
      { "color": "#ffffff" }
    ]
  },{
    "featureType": "poi",
    "elementType": "geometry.fill",
    "stylers": [
      { "color": "#d6d5d5" },
      { "visibility": "on" }
    ]
  },{
    "featureType": "poi",
    "elementType": "labels.text.fill",
    "stylers": [
      { "color": "#434443" }
    ]
  },{
  }
];

map.setOptions({styles: styles});

Answer 3

Google Maps APIを確認します。そこにすべてが記載されています。