Google Map API v3，在单独的文件中移动地图样式

【问题标题】：Google Map API v3, Move map style in a separate fileGoogle Map API v3，在单独的文件中移动地图样式
【发布时间】：2016-12-23 13:45:00
【问题描述】：

我正在为一个项目使用 Google 地图 [v3] 提供的 API。该地图的样式很重，我无法弄清楚如何将脚本的样式部分放在外部 JavaScript 文件中并在我的函数中调用它。

map = new google.maps.Map(document.getElementById('map-canvas'), {
center: {lat:40, lng: -97.7313421},
zoom: 3,
clickable: true,
styles: [
        {
          "elementType": "geometry",
          "stylers": [
            {
              "color": "#212121"
            }
          ]
        }, ....

为了清楚起见，我只希望数组的样式部分位于其他位置。

【问题讨论】：

你能用你的地图代码添加一个 jsFiddle 吗？
不幸的是，我不能给你我的代码，因为它包含我公司的 API 密钥和仅在我们的 Intranet 上加载数据的 JSON 文件，但我复制了这个样式：codepen。如您所知，样式很长

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

【解决方案1】：

Plunkr code put together.

将原始样式数组放入单个文件（此处为 styles.js）并使用 jQuery GET 将该文件拉入并包含该变量到您的 Google 地图样式中。

...
function initMap() {
    var mapStyle = '';

    $.get( 'styles.js', function( data ) {
      if (data) {
        mapStyle = JSON.parse(data);
        map_options = {
          zoom: 10,
          center: {lat: 42.9456, lng: -122.2},
          styles: mapStyle
        }

        map_document = document.getElementById('map')
        map = new google.maps.Map(map_document,map_options);
        loadMarkers()
      }
    });
}

google.maps.event.addDomListener(window, 'load', initMap);

styles.js 文件包含的样式与您通常编写的样式完全相同：

[
    {
        "elementType": "geometry",
        "stylers": [
            {
                "color": "#212121"
            }
        ]
    },
 ...
 ]

【讨论】：