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 
});