javascript - Stacking Map Styles (Google Maps API)

Question

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 reinitialize the map and losing any pins dropped, or locations searched.

For example, turning off and on road labels. I have accomplished this in a hacky way where I've created two complete style objects, and I switch between them with map.setMapTypeId.

The problem with this is that a) it's very repetitive, and b) I have a lot of options I want to be able to toggle, so having to make styled sheets for every single variation of my toggle-able options is not realistic.

The realistic solution is to be able to concat objects on to my style options without undoing the previous style options entirely.

e.g.

  {
    'featureType': 'landscape',
    'elementType': 'geometry',
    'stylers': [{'color': '#eaeaea'}]
  }

then concatenating this style:

  {
    'featureType': 'all',
    'elementType': 'labels',
    'stylers': [{'visibility': 'off'}]
  }

I can't just alter the original object because the styles won't take until the map is reloaded, causing me to lose my markers and map position.

I need it to function something like map.setMapTypeId('styled_map', 'styled_map_2'); where my styles are just compiled.

Hopefully I've made the dilemma clear.

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