如何获得新的gmaps样式?

时间:2017-12-29 18:23:41

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

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

Old map

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

enter image description here

如何获得新的gmaps设计?

我想我需要一个JSON样式,但不能从map找到官方的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的

enter image description here

1 个答案:

答案 0 :(得分:0)

您可以在https://mapstyle.withgoogle.com/创建自己的自定义样式并导出为JSON文件。该工具使您有机会将样式声明为粒度级别

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