Stacking Map Styles (Google Maps API)

So I can't find an answer to this, but I know it's possible, because I've seen it. I'm trying to toggle specific style options on my custom styled map without having to reinitiali

Solution 1:

One way of doing that would be as explained in this post Looking For a Correct Way to Hide or Display Streets on Map

This is if you just need to toggle the visibility of elements on and off.

If you need more flexibility than that, based on the same idea as the above and what I mentioned in my first comment, you can have more flexibility. Here is a quick POC using checkboxes and data attributes to change stuff around.

var map;

function initialize() {

  var myLatLng = new google.maps.LatLng(46.2, 6.17);
  var mapOptions = {
    zoom: 4,
    center: myLatLng,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };

  map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);

  $('input').change(changeStyles);

  changeStyles();
}

function changeStyles() {

  // Empty styles array
  var styles = [];

  // Loop through all checkboxes
  $('input:checkbox').each(function(i, el) {

    // If the checkbox is checked, we use it
    if ($(el).prop('checked')) {

      // Create the style object
      var style = {
        "featureType": $(el).data('feature-type'),
        "elementType": $(el).data('element-type'),
        "stylers": []
      };

      // Split the data-stylers value to get our stylers object key and value
      var values = $(el).data('stylers').split(':');
      var ob = {};

      // Use our data key and value
      ob[values[0]] = values[1];

      // Push the styler
      style.stylers.push(ob);

      // Push the style
      styles.push(style);
    }
  });

  // Set the map style
  map.setOptions({
    styles: styles
  });
}

initialize();

#map-canvas {
  height: 150px;
}

<div id="map-canvas"></div>
<input type="checkbox" data-feature-type="water" data-element-type="geometry.fill" data-stylers="color:#1cb9ff"> Change Water Color
<input type="checkbox" checked data-feature-type="all" data-element-type="labels.text" data-stylers="visibility:off"> Hide labels

<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Code is commented so it should be easy to understand the concept. Obviously you would need to extend it a bit if you require to change more than one option with one checkbox.

Solution 2:

// create a variable for the element you want an option for
var styleOptionCityLabels = {
  featureType: 'administrative',
  elementType: 'labels',
  stylers: [{'visibility': 'on'}]
};

// create a variable for your map styles that pulls any option variables you have
var mapStyle = [styleOptionCityLabels];

  // get the checkbox element you want to control your toggle
  var cityCheck = $('#city-labels-checkbox');

  // apply a click listener to the box
  cityCheck.on('click', function(){

    // check if the box is checked
    if ($(cityCheck).is(':checked')) {

     // change the desired style
     styleOptionCityLabels.stylers = [{'visibility': 'on'}];
    } else {

     // change the desired style
     styleOptionCityLabels.stylers = [{'visibility': 'off'}];
    }

    // call the setOptions method to reload the altered styles
    map.setOptions({styles: mapStyle}); 
  });