Google Map API v3, перемещение стиля карты в отдельный файл

Question

Я использую API, предоставляемый Google map [v3] для проекта. Карта сильно стилена, и я не могу понять, как поместить раздел стиля моего скрипта во внешний файл 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" 
      } 
      ] 
     }, .... 

Чтобы быть ясным, я хочу, чтобы раздел стиля массива находился где-то в другом месте.

Answer 1

Plunkr code put together.

Поместите исходный массив стиль в одном файле (здесь styles.js) и использовать JQuery GET, чтобы вытащить этот файл в переменную включить эту в свой Google Map Style.

... 
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" 
      } 
     ] 
    }, 
... 
]