如何获得新的 gmaps 样式？答案

【问题标题】：How to get new gmaps styles?如何获得新的 gmaps 样式？
【发布时间】：2018-06-10 03:21:54
【问题描述】：

当我创建一个简单的谷歌地图时，我得到了这样的地图

但在https://www.google.com.ua/maps/ 中，地图看起来像这样

如何获得新设计的gmaps？

我想我需要一个 JSON 样式，但无法从地图中找到官方 JSON 样式。

代码

<!DOCTYPE html>
<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=YOUR_API_KEY&callback=initMap"
async defer></script>

这里是官方演示（旧设计） https://google-developers.appspot.com/maps/documentation/javascript/examples/full/map-simple

来自 jsfiddle

【问题讨论】：

你是如何加载你的“简单谷歌地图”的？我使用 Google Maps Javascript API v3 看到的任何东西看起来更像底部图片而不是顶部图片。请提供一个 minimal reproducible example 来证明您的问题。
@geocodezip 来自这里的所有代码developers.google.com/maps/documentation/javascript/tutorial
tiles I get from that code（已修改以将位置更改为与发布的图片接近的位置）看起来仍然更像第二张图片而不是第一张。
不适合我。添加了新的截图
那张截图看起来更像是第二张而不是第一张。

标签： javascript google-maps google-maps-api-3 maps

【解决方案1】：

您可以在https://mapstyle.withgoogle.com/ 此处创建自己的自定义样式并导出为 JSON 文件。该工具让您有机会详细声明样式

其他选项是 https://snazzymaps.com/ 或 http://www.mapstylr.com/ 以使用任何现有样式或创建您的样式。

【讨论】：