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

CC BY-SA 4.0
2021-06-10T23:43:29.327Z
Yasss! Thank you!
Charlie Triplett
CC BY-SA 4.0
2021-06-08T21:45:05.620Z
2021-06-08T21:53:11.040Z
2021-06-08T21:53:11.040Z
Lindsey D
<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>

CC BY-SA 4.0
2021-05-19T18:18:46.090Z
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.
Lindsey D
CC BY-SA 4.0
2021-06-08T22:32:22.773Z
Just added a comprehensive answer, thanks for your patience! :)
Lindsey D
<plugin-googlemaps>
Google Maps Plugin - Toggle KML layer
# 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'
    })
  }}
  

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) - Hide a KML layer
showKml(kmlId) - Show a KML layer
getKml(kmlId) - Get the raw Google API object

These methods are explained in greater detail in the 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!  

---

