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;

functioninitialize() {

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

functionchangeStyles() {

  // Empty styles arrayvar styles = [];

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

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

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

      // Split the data-stylers value to get our stylers object key and valuevar 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;
}

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

<scriptsrc="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script><scriptsrc="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 forvar styleOptionCityLabels = {
  featureType: 'administrative',
  elementType: 'labels',
  stylers: [{'visibility': 'on'}]
};

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

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

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

    // check if the box is checkedif ($(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}); 
  });