Impresspages 4 Google地图自定义样式

Question

我尝试将自定义样式分配给Google地图窗口小部件。地图styled.php与代码： 我在目录/主题/ THEMENAME /清除/ IP /内部/内容/空间/地图/护肤/ 我的皮肤文件名中创建的文件

<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地图和标记对象上做cutomizations。见下面的例子。将此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 
});