Impresspages 4 Google Maps собственный стиль

Question

Я пытаюсь назначить собственный стиль для виджета карт Google. Я создал файл в каталоге /Theme/themename/override/Ip/Internal/Content/Widget/Map/Skin/ Имя моей кожи: map-styled.php с кодом:

    <div
data-maptypeid="<?php echo escAttr($mapTypeId); ?>"
data-zoom="<?php echo escAttr($zoom); ?>"
data-lat="<?php echo escAttr($lat); ?>"
data-lng="<?php echo escAttr($lng); ?>"

<?php if (isset($markerlat)) { ?>
    data-markerlat="<?php echo escAttr($markerlat); ?>"
<?php } ?>

<?php if (isset($markerlng)) { ?>
    data-markerlng="<?php echo escAttr($markerlng); ?>"
<?php } ?>

style="height: <?php echo ($height); ?>; width: <?php echo ($width); ?>;"
data-initialized="0"
class="ipsMap">
</div>
<?php if (ipIsManagementState()) { ?>
    <script>
        if (typeof ipMap !== 'undefined'){
            ipMap.init();
        }
    </script>
<?php } ?>
<script>
var styles = [
  {
    stylers: [
      { hue: "#00ffe6" },
      { saturation: -20 }
    ]
  },{
    featureType: "road",
    elementType: "geometry",
    stylers: [
      { lightness: 100 },
      { visibility: "simplified" }
    ]
  },{
    featureType: "road",
    elementType: "labels",
    stylers: [
      { visibility: "off" }
    ]
  }
];

map.setOptions({styles: styles});
</script>

Я не программист, так что код может быть бессмысленным;) Думаю, ответ поможет многим не программистам:) Заранее спасибо.

Answer 1

Виджет Карты запускает событие ipWidgetMapInit при инициализации. В это время вы можете делать срезы на картах gmaps и маркерных объектах. Смотрите пример ниже. Добавьте этот код JavaScript в отдельный файл. Используйте функцию ipAddJs, чтобы добавить этот файл в ваш плагин или тему.

$('.ipWidget-Map').on('ipWidgetMapInit', function(e, variables) {
var styles = [
    {
        stylers: [
            { hue: "#ff0000" },
            { saturation: -100 }
        ]
    },{
        featureType: "road",
        elementType: "geometry",
        stylers: [
            { lightness: 100 },
            { visibility: "simplified" }
        ]
    },{
        featureType: "road",
        elementType: "labels",
        stylers: [
            { visibility: "off" }
        ]
    }
];

variables.map.setOptions({styles: styles});

//do any additional modifications to variables.marker
});