Как добавить серый слой на гугл карту

319

05 августа 2017, 02:35

Как можно добавить поверх карты серый цвет, ну или карту как сделать черно-белой. И хотелось бы, чтоб на карту можно было кликать при этом :)

<html> 
  <head> 
    <title>Simple Map</title> 
    <meta name="viewport" content="initial-scale=1.0"> 
    <meta charset="utf-8"> 
    <style> 
      /* Always set the map height explicitly to define the size of the div 
       * element that contains the map. */ 
      #map { 
        height: 100%; 
      } 
      /* Optional: Makes the sample page fill the window. */ 
      html, body { 
        height: 100%; 
        margin: 0; 
        padding: 0; 
      } 
    </style> 
  </head> 
  <body> 
    <div id="map"></div> 
    <script> 
      var map; 
      function initMap() { 
        map = new google.maps.Map(document.getElementById('map'), { 
          center: {lat: -34.397, lng: 150.644}, 
          zoom: 8 
        }); 
      } 
    </script> 
    <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBNPpmrNOp_dyxwKRa7VFekvHt4ARNyWMk&callback=initMap" 
    async defer></script> 
  </body> 
</html>

Answer 1

Используйте Google Map Styling Wizard. С его помощью создайте json, вставьте его в свой скрипт как переменную. Создайте стиль с помощью StyledMapType и прикрепите его к карте с помощью map.mapTypes.set и map.setMapTypeId.

См. сниппет:

<html> 
 
<head> 
  <title>Simple Map</title> 
  <meta name="viewport" content="initial-scale=1.0"> 
  <meta charset="utf-8"> 
  <style> 
    /* Always set the map height explicitly to define the size of the div 
       * element that contains the map. */ 
     
    #map { 
      height: 100%; 
    } 
    /* Optional: Makes the sample page fill the window. */ 
     
    html, 
    body { 
      height: 100%; 
      margin: 0; 
      padding: 0; 
    } 
  </style> 
</head> 
 
<body> 
  <div id="map"></div> 
  <script> 
    // KAGG style 
    var KAGG = [{ 
        "elementType": "geometry", 
        "stylers": [{ 
          "color": "#244059" 
        }] 
      }, 
      { 
        "elementType": "labels.text.fill", 
        "stylers": [{ 
          "color": "#8ec3b9" 
        }] 
      }, 
      { 
        "elementType": "labels.text.stroke", 
        "stylers": [{ 
          "color": "#1a3646" 
        }] 
      }, 
      { 
        "featureType": "administrative", 
        "stylers": [{ 
          "visibility": "off" 
        }] 
      }, 
      { 
        "featureType": "administrative.country", 
        "elementType": "geometry.stroke", 
        "stylers": [{ 
            "color": "#4b6878" 
          }, 
          { 
            "visibility": "on" 
          } 
        ] 
      }, 
      { 
        "featureType": "administrative.land_parcel", 
        "elementType": "labels.text.fill", 
        "stylers": [{ 
          "color": "#64779e" 
        }] 
      }, 
      { 
        "featureType": "administrative.locality", 
        "stylers": [{ 
          "visibility": "off" 
        }] 
      }, 
      { 
        "featureType": "administrative.province", 
        "elementType": "geometry.stroke", 
        "stylers": [{ 
            "color": "#4b6878" 
          }, 
          { 
            "visibility": "off" 
          } 
        ] 
      }, 
      { 
        "featureType": "landscape", 
        "elementType": "labels", 
        "stylers": [{ 
          "visibility": "off" 
        }] 
      }, 
      { 
        "featureType": "landscape.man_made", 
        "elementType": "geometry.stroke", 
        "stylers": [{ 
            "color": "#334e87" 
          }, 
          { 
            "visibility": "off" 
          } 
        ] 
      }, 
      { 
        "featureType": "landscape.natural", 
        "elementType": "geometry", 
        "stylers": [{ 
          "color": "#023e58" 
        }] 
      }, 
      { 
        "featureType": "poi", 
        "stylers": [{ 
          "visibility": "off" 
        }] 
      }, 
      { 
        "featureType": "poi", 
        "elementType": "geometry", 
        "stylers": [{ 
            "color": "#283d6a" 
          }, 
          { 
            "visibility": "off" 
          } 
        ] 
      }, 
      { 
        "featureType": "poi", 
        "elementType": "labels.text.fill", 
        "stylers": [{ 
            "color": "#6f9ba5" 
          }, 
          { 
            "visibility": "off" 
          } 
        ] 
      }, 
      { 
        "featureType": "poi", 
        "elementType": "labels.text.stroke", 
        "stylers": [{ 
            "color": "#1d2c4d" 
          }, 
          { 
            "visibility": "off" 
          } 
        ] 
      }, 
      { 
        "featureType": "poi.park", 
        "elementType": "geometry.fill", 
        "stylers": [{ 
            "color": "#023e58" 
          }, 
          { 
            "visibility": "off" 
          } 
        ] 
      }, 
      { 
        "featureType": "poi.park", 
        "elementType": "labels.text.fill", 
        "stylers": [{ 
            "color": "#3c7680" 
          }, 
          { 
            "visibility": "off" 
          } 
        ] 
      }, 
      { 
        "featureType": "road", 
        "stylers": [{ 
          "visibility": "off" 
        }] 
      }, 
      { 
        "featureType": "road", 
        "elementType": "geometry", 
        "stylers": [{ 
            "color": "#304a7d" 
          }, 
          { 
            "visibility": "off" 
          } 
        ] 
      }, 
      { 
        "featureType": "road", 
        "elementType": "labels.text.fill", 
        "stylers": [{ 
            "color": "#98a5be" 
          }, 
          { 
            "visibility": "off" 
          } 
        ] 
      }, 
      { 
        "featureType": "road", 
        "elementType": "labels.text.stroke", 
        "stylers": [{ 
            "color": "#1d2c4d" 
          }, 
          { 
            "visibility": "off" 
          } 
        ] 
      }, 
      { 
        "featureType": "road.highway", 
        "elementType": "geometry", 
        "stylers": [{ 
          "color": "#2c6675" 
        }] 
      }, 
      { 
        "featureType": "road.highway", 
        "elementType": "geometry.stroke", 
        "stylers": [{ 
          "color": "#255763" 
        }] 
      }, 
      { 
        "featureType": "road.highway", 
        "elementType": "labels.text.fill", 
        "stylers": [{ 
          "color": "#b0d5ce" 
        }] 
      }, 
      { 
        "featureType": "road.highway", 
        "elementType": "labels.text.stroke", 
        "stylers": [{ 
          "color": "#023e58" 
        }] 
      }, 
      { 
        "featureType": "transit", 
        "stylers": [{ 
          "visibility": "off" 
        }] 
      }, 
      { 
        "featureType": "transit", 
        "elementType": "labels.text.fill", 
        "stylers": [{ 
            "color": "#98a5be" 
          }, 
          { 
            "visibility": "off" 
          } 
        ] 
      }, 
      { 
        "featureType": "transit", 
        "elementType": "labels.text.stroke", 
        "stylers": [{ 
            "color": "#1d2c4d" 
          }, 
          { 
            "visibility": "off" 
          } 
        ] 
      }, 
      { 
        "featureType": "transit.line", 
        "elementType": "geometry.fill", 
        "stylers": [{ 
            "color": "#283d6a" 
          }, 
          { 
            "visibility": "off" 
          } 
        ] 
      }, 
      { 
        "featureType": "transit.station", 
        "elementType": "geometry", 
        "stylers": [{ 
            "color": "#3a4762" 
          }, 
          { 
            "visibility": "off" 
          } 
        ] 
      }, 
      { 
        "featureType": "water", 
        "elementType": "geometry", 
        "stylers": [{ 
          "color": "#0e1626" 
        }] 
      }, 
      { 
        "featureType": "water", 
        "elementType": "labels.text.fill", 
        "stylers": [{ 
            "color": "#4e6d70" 
          }, 
          { 
            "visibility": "off" 
          } 
        ] 
      } 
    ]; 
    var map; 
 
    function initMap() { 
      // Declare new style 
      var KAGGstyledMap = new google.maps.StyledMapType(KAGG, { 
        name: "KAGG" 
      }); 
 
      map = new google.maps.Map(document.getElementById('map'), { 
        center: { 
          lat: -34.397, 
          lng: 150.644 
        }, 
        zoom: 8 
      }); 
 
      // Setup skin for the map 
      map.mapTypes.set('KAGG_style', KAGGstyledMap); 
      map.setMapTypeId('KAGG_style'); 
 
    } 
  </script> 
  <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBNPpmrNOp_dyxwKRa7VFekvHt4ARNyWMk&callback=initMap" async defer></script> 
</body> 
 
</html>