如何使用完全相同的谷歌地图样式和PIN位置

Question

我想对客户的网站地图使用相同的样式和PIN位置，就像这样：http://www.bekaerttextiles.com/en但是除了谷歌地图 apis 文件之外，我看不到与地图相关的任何内容。它是如何生成这张地图的？没有任何与PIN位置及其经度相关的json或javascript。也不是地图的白色风格。

Answer 1

您可以通过向

配置对象添加styles来设计映射（new google.maps.Map中的第二个参数）。查看文档

注意：标记图标是私有映像，因此您应该自己创建一个。（http://www.bekaerttextiles.com/build/web/images/marker.svg）

您正在寻找的样式是：

[
  {
    "featureType": "water",
    "elementType": "geometry.fill",
    "stylers": [
      {
        "color": "#F2F0E9"
      }
    ]
  },
  {
    "featureType": "water",
    "elementType": "labels",
    "stylers": [
      {
        "visibility": "off"
      }
    ]
  },
  {
    "featureType": "landscape",
    "elementType": "all",
    "stylers": [
      {
        "color": "#ffffff"
      }
    ]
  },
  {
    "featureType": "administrative",
    "elementType": "all",
    "stylers": [
      {
        "visibility": "off"
      }
    ]
  },
  {
    "featureType": "poi",
    "elementType": "all",
    "stylers": [
      {
        "color": "#ffffff"
      }
    ]
  },
  {
    "featureType": "road",
    "elementType": "all",
    "stylers": [
      {
        "visibility": "off"
      }
    ]
  },
  {
    "featureType": "transit",
    "elementType": "all",
    "stylers": [
      {
        "visibility": "off"
      }
    ]
  }
]

还有活生生的例子：

function initMap() {
  var uluru = {lat: -25.363, lng: 131.044};
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 1,
    center: uluru,
    styles: styles
  });
  var marker = new google.maps.Marker({
    position: uluru,
    map: map
  });
}
var styles = [
  {
    "featureType": "water",
    "elementType": "geometry.fill",
    "stylers": [
      {
        "color": "#F2F0E9"
      }
    ]
  },
  {
    "featureType": "water",
    "elementType": "labels",
    "stylers": [
      {
        "visibility": "off"
      }
    ]
  },
  {
    "featureType": "landscape",
    "elementType": "all",
    "stylers": [
      {
        "color": "#ffffff"
      }
    ]
  },
  {
    "featureType": "administrative",
    "elementType": "all",
    "stylers": [
      {
        "visibility": "off"
      }
    ]
  },
  {
    "featureType": "poi",
    "elementType": "all",
    "stylers": [
      {
        "color": "#ffffff"
      }
    ]
  },
  {
    "featureType": "road",
    "elementType": "all",
    "stylers": [
      {
        "visibility": "off"
      }
    ]
  },
  {
    "featureType": "transit",
    "elementType": "all",
    "stylers": [
      {
        "visibility": "off"
      }
    ]
  }
];

#map {
  height: 400px;
  width: 100%;
}

<h3>My Google Maps Demo</h3>
<div id="map"></div>
<script async defer
        src="https://maps.googleapis.com/maps/api/js?callback=initMap">
</script>

http://output.jsbin.com/fiqapa