Impresspages 4 Google Maps custom style

Question

I try assign custom style to Google maps widget. I created a file in a directory /Theme/themename/override/Ip/Internal/Content/Widget/Map/Skin/ My skin filename: map-styled.php with code:

    <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>

I am not programmer so code can be no sense;) I think the answer will help many non-programmer people :) Thanks in advance.

score 0 · Answer 1 · answered Sep 03 '14 at 08:21

Maps widget triggers ipWidgetMapInit event on initializtion. At that time you can do cutomizations on gmaps map and marker objects. See example bellow. Add this JavaScript code to a separate file. Use ipAddJs function to add that file in your plugin or theme.

$('.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
});

Impresspages 4 Google Maps custom style

1 Answers1