如何使用完全相同的Google地图样式和PIN码位置？

Question

I want to use the same style and PIN locations for a client's website map just like this : http://www.bekaerttextiles.com/en
But I can't see anything related to map except google maps apis file. How is it generating this map? There's not any json or javascript related to PIN locations and their lat-long. nor the white style of map.

Answer 1

You can design your map by adding styles to the config object (The second parameter in new google.maps.Map ). See the docs

Note: The marker icon is a private image so you should create one by your own. ( http://www.bekaerttextiles.com/build/web/images/marker.svg )

The styles you are looking for are:

[
  {
    "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"
      }
    ]
  }
]

And the live example:

 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