# Seeking help to create toggle views of \`kml\` data in Google Maps

**URL:** <https://talk.observablehq.com/t/seeking-help-to-create-toggle-views-of-kml-data-in-google-maps/850>\
**Category:** Help\
**Created:** [June 6, 2018, 8:47pm UTC](https://talk.observablehq.com/t/seeking-help-to-create-toggle-views-of-kml-data-in-google-maps/850 "2018-06-06T20:47:56Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![aaronkyle](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/aaronkyle/32/8106_2.png) [@aaronkyle](https://talk.observablehq.com/u/aaronkyle)\
**Post date:** [June 6, 2018, 8:47pm UTC](https://talk.observablehq.com/t/seeking-help-to-create-toggle-views-of-kml-data-in-google-maps/850/1 "2018-06-06T20:47:56Z")

</div>

Dear Observable Community,

I would like to learning how to add groups of vector data (stored as [kml](https://developers.google.com/kml/documentation/) file) to a Google map so that it can be clicked on and off through a user interface. Bram Van den Bulcke [created a tutorial showing how to accomplish this with Google Maps](https://www.bramvandenbulcke.be/en/article/google-map-layer-toggle). I am currently struggling to port the example to Observable.

Bram’s working web example using Kml layers is available [here](https://www.bramvandenbulcke.be/sites/default/files/maps/vlaanderen-bereikbaarheid/googlemapskmztogglearray.html). My attempt to port it to Observable (based on [Tom’s example](https://beta.observablehq.com/@tmcw/using-google-maps)) is here:

> **[Toggle Data Views in Google Maps](https://observablehq.com/d/d531bc8bd86cae4c)**
>
> An Observable notebook by Aaron Kyle Dennis.

The map is working and I am not getting error message with the JavaScript code. On the face of it, everything appears connected in the same way as in [Bram’s example](https://www.bramvandenbulcke.be/sites/default/files/maps/vlaanderen-bereikbaarheid/googlemapskmztogglearray.html), yet the HTML toggles don’t effect any changes in the map.

I assume that I am missing some connection between the HTML toggles and the JavaScript. Would you be willing to show me how to accomplish this?

Thanks in advance for your time and guidance!

Sincerely,

Aaron

---

<div class="post-metadata">

**Author:** ![jashkenas](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/jashkenas/32/1778_2.png) [@jashkenas](https://talk.observablehq.com/u/jashkenas)\
**Post date:** [June 6, 2018, 9:02pm UTC](https://talk.observablehq.com/t/seeking-help-to-create-toggle-views-of-kml-data-in-google-maps/850/2 "2018-06-06T21:02:47Z")

</div>

Hi Aaron.

Here’s a quick 3-minute tweak to get your map working:

> **[Toggle Data Views in Google Maps (Fork for the Forums)](https://observablehq.com/d/73fd124a58ab00fd)**
>
> An Observable notebook by Jeremy Ashkenas.

It breaks things out into separate cells, and uses the “checkbox” input from the bazaar to provide a quick way to turn a set of HTML checkboxes into a reactive array of JS values.

Then we just need a cell (in this case, `setRoutes`) that observes the array of routes, and calls `setMap()` on each layer whenever the array is updated.

Cheers.

---

<div class="post-metadata">

**Author:** ![aaronkyle](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/aaronkyle/32/8106_2.png) [@aaronkyle](https://talk.observablehq.com/u/aaronkyle)\
**Post date:** [June 6, 2018, 9:23pm UTC](https://talk.observablehq.com/t/seeking-help-to-create-toggle-views-of-kml-data-in-google-maps/850/3 "2018-06-06T21:23:39Z")

</div>

Wow! You do this stuff with lightening speed!

Thank you, Jeremy, for your time and help on this. I’ll study your work and then see if I can adapt it in the context of another notebook with a similar input ‘connection’ challenge. 🙂

Thank you for your generous mentoring!