Answers.Body: <p>As of <strong>v4.0.10</strong> of the Google Maps plugin, three new functions have been added for working with KML layers...</p>
  <ul>
  <li><a href="https://plugins.doublesecretagency.com/google-maps/dynamic-maps/universal-methods/#hidekml-kmlid" rel="nofollow noreferrer"><code>hideKml(kmlId)</code></a> - Hide a KML layer</li>
  <li><a href="https://plugins.doublesecretagency.com/google-maps/dynamic-maps/universal-methods/#showkml-kmlid" rel="nofollow noreferrer"><code>showKml(kmlId)</code></a> - Show a KML layer</li>
  <li><a href="https://plugins.doublesecretagency.com/google-maps/dynamic-maps/javascript-methods/#getkml-kmlid" rel="nofollow noreferrer"><code>getKml(kmlId)</code></a> - Get the raw Google API object</li>
  </ul>
  <p>These methods are explained in greater detail in the <a href="https://plugins.doublesecretagency.com/google-maps/guides/kml-layers/" rel="nofollow noreferrer"><strong>KML Layers</strong></a> documentation.</p>
  <hr />
  <p>In other words, your example might look something more like this...</p>
  <pre><code>{# Create the map #}
  {% set map = googleMaps.map(locations, {
      'id': 'mapAlpha',
  }) %}
  
  {# Set the KML layer URL #}
  {% set url = 'https://www.comovisionzero.org/assets/data/high-crash-network.kml' %}
  
  {# Add the KML layer #}
  {% do map.kml(url, {
      'id': 'my-kml',
      'kmlLayerOptions': {
          'preserveViewport': true
      }
  }) %}
  
  {# Display the map #}
  {{ map.tag() }}
  
  {% js %}
  // Toggle the street layer KML
  function toggleStreetLayer() {
  
      // Get the existing map
      var map = googleMaps.getMap('mapAlpha');
  
      // Show or hide the KML layer
      if( $(&quot;#streets&quot;).is(':checked') ) {
          map.showKml('my-kml');
      }
      else {
          map.hideKml('my-kml');
      }
  
  }
  {% endjs %}
  </code></pre>
  <p>Worth keeping in mind that there are several other ways to approach this as well, since there are now strong parallels between JS, Twig, and PHP.</p>
  <p>Hope that helps!</p>
  
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2021-06-10T23:43:29.327Z
Answers.Text: Yasss! Thank you!
Answers.UserDisplayName: Charlie Triplett
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2021-06-08T21:45:05.620Z
Answers.LastActivityDate: 2021-06-08T21:53:11.040Z
Answers.LastEditDate: 2021-06-08T21:53:11.040Z
Answers.UserDisplayName: Lindsey D
Body: <p>In the previous version of the Google Maps plugin (Smart Maps) I used something similar to this to toggle multiple KML layers:</p>
  <pre><code>    var streetLayer = new google.maps.KmlLayer('https://www.comovisionzero.org/assets/data/high-crash-network.kml', {
          preserveViewport: true,
          suppressInfoWindows: false
      })
      function toggleStreetLayer() {
          if( $(&quot;#streets&quot;).is(':checked') ) {
              streetLayer.setMap(map);
          }
          else {
              streetLayer.setMap(null);
          }
      }
  </code></pre>
  <p>In the new version, I'm trying to use the callback and map.kml functionality, but I'm having difficulty toggling the KML layer off:</p>
  <pre><code>  {{ map.tag({
      'callback': 'mapFilters'
      })
    }}
    &lt;script&gt;
    {% js %}
      function mapFilters() {
        var map = googleMaps.getMap('mapAlpha');
  
  
        function showLayer(kmlUrl) {
          map.kml(kmlUrl, {
            'preserveViewport': true
          });
        };
  
        function toggleStreetLayer() {
          if( $(&quot;#streets&quot;).is(':checked') ) {
            showLayer('https://www.comovisionzero.org/assets/data/high-crash-network.kml');
          }
          else {
            showLayer(null);
          }
        }
  
        $(&quot;input&quot;).change(function() {
            toggleStreetLayer();
        });
  
      }
    {% endjs %}
    &lt;/script&gt;
  </code></pre>
  <p>Am I even close to being on the right track?</p>
  
Comments.ContentLicense: CC BY-SA 4.0
Comments.CreationDate: 2021-05-19T18:18:46.090Z
Comments.Text: Easier-to-use KML functions [are coming soon](https://github.com/doublesecretagency/craft-googlemaps/issues/24), if you don't mind waiting a few weeks.
Comments.UserDisplayName: Lindsey D
Comments.ContentLicense: CC BY-SA 4.0
Comments.CreationDate: 2021-06-08T22:32:22.773Z
Comments.Text: Just added a comprehensive answer, thanks for your patience! :)
Comments.UserDisplayName: Lindsey D
Tags: <plugin-googlemaps>
Title: Google Maps Plugin - Toggle KML layer
ThreadText: # Google Maps Plugin - Toggle KML layer
  
  (Asked by: username_0 on 2021-05-19)
  
  In the previous version of the Google Maps plugin (Smart Maps) I used something similar to this to toggle multiple KML layers:
  
  ```
      var streetLayer = new google.maps.KmlLayer('https://www.comovisionzero.org/assets/data/high-crash-network.kml', {
          preserveViewport: true,
          suppressInfoWindows: false
      })
      function toggleStreetLayer() {
          if( $("#streets").is(':checked') ) {
              streetLayer.setMap(map);
          }
          else {
              streetLayer.setMap(null);
          }
      }
  
  ```
  
  In the new version, I'm trying to use the callback and map.kml functionality, but I'm having difficulty toggling the KML layer off:
  
  ```
    {{ map.tag({
      'callback': 'mapFilters'
      })
    }}
    <script>
    {% js %}
      function mapFilters() {
        var map = googleMaps.getMap('mapAlpha');
  
        function showLayer(kmlUrl) {
          map.kml(kmlUrl, {
            'preserveViewport': true
          });
        };
  
        function toggleStreetLayer() {
          if( $("#streets").is(':checked') ) {
            showLayer('https://www.comovisionzero.org/assets/data/high-crash-network.kml');
          }
          else {
            showLayer(null);
          }
        }
  
        $("input").change(function() {
            toggleStreetLayer();
        });
  
      }
    {% endjs %}
    </script>
  
  ```
  
  Am I even close to being on the right track?
  
  **Tags:** plugin-googlemaps
  
  > **Comments:**
  > **username_1**: Easier-to-use KML functions [are coming soon](https://github.com/doublesecretagency/craft-googlemaps/issues/24), if you don't mind waiting a few weeks.  
  > **username_1**: Just added a comprehensive answer, thanks for your patience! :)  
  
  ---
  
  ## 1 answers
  
  ### Answer by username_1 on 2021-06-08. Score: 3 | Accepted answer
  
  As of **v4.0.10** of the Google Maps plugin, three new functions have been added for working with KML layers...
  
  * [`hideKml(kmlId)`](https://plugins.doublesecretagency.com/google-maps/dynamic-maps/universal-methods/#hidekml-kmlid) - Hide a KML layer
  * [`showKml(kmlId)`](https://plugins.doublesecretagency.com/google-maps/dynamic-maps/universal-methods/#showkml-kmlid) - Show a KML layer
  * [`getKml(kmlId)`](https://plugins.doublesecretagency.com/google-maps/dynamic-maps/javascript-methods/#getkml-kmlid) - Get the raw Google API object
  
  These methods are explained in greater detail in the [**KML Layers**](https://plugins.doublesecretagency.com/google-maps/guides/kml-layers/) documentation.
  
  ---
  
  In other words, your example might look something more like this...
  
  ```
  {# Create the map #}
  {% set map = googleMaps.map(locations, {
      'id': 'mapAlpha',
  }) %}
  
  {# Set the KML layer URL #}
  {% set url = 'https://www.comovisionzero.org/assets/data/high-crash-network.kml' %}
  
  {# Add the KML layer #}
  {% do map.kml(url, {
      'id': 'my-kml',
      'kmlLayerOptions': {
          'preserveViewport': true
      }
  }) %}
  
  {# Display the map #}
  {{ map.tag() }}
  
  {% js %}
  // Toggle the street layer KML
  function toggleStreetLayer() {
  
      // Get the existing map
      var map = googleMaps.getMap('mapAlpha');
  
      // Show or hide the KML layer
      if( $("#streets").is(':checked') ) {
          map.showKml('my-kml');
      }
      else {
          map.hideKml('my-kml');
      }
  
  }
  {% endjs %}
  
  ```
  
  Worth keeping in mind that there are several other ways to approach this as well, since there are now strong parallels between JS, Twig, and PHP.
  
  Hope that helps!
  
  > **Comments:**
  > **username_0**: Yasss! Thank you!  
  
  ---
  
  