Find Help
Demonstration
-
Queens SNAP Center / Job Center
- Home Energy Assistance Program (HEAP), Cooling Assistance Benefit, Supplemental Nutrition Assistance Program (SNAP)
- 32-20 Northern Blvd., Long Island City, 6th / 2nd Floor, Queens, NY 11101
-
Richmond SNAP Center / Job Center
- Home Energy Assistance Program (HEAP), Cooling Assistance Benefit, Supplemental Nutrition Assistance Program (SNAP)
- 201 Bay Street, 1st and 2nd Floor, Staten Island, NY 10301
-
Crotona SNAP Center / Job Center
- Home Energy Assistance Program (HEAP), Cooling Assistance Benefit, Supplemental Nutrition Assistance Program (SNAP)
- 1910 Monterey Avenue, 5th / 2nd Floor, Bronx, NY 10457
-
Waverly SNAP Center / Job Center
- Home Energy Assistance Program (HEAP), Cooling Assistance Benefit, Supplemental Nutrition Assistance Program (SNAP)
- 32-20 Northern Blvd., Long Island City, 6th / 2nd Floor, Queens, NY 11101
-
Clinton Hill SNAP Center / Job Center
- Supplemental Nutrition Assistance Program (SNAP)
- 495 Clermont Avenue, Brooklyn, NY 11238
Code
<div class="layout-map desktop:layout-sidebar bg-scale-2" id="find-help">
<div class="layout-map__sidebar p-2">
<div class="c-question mb-3" id="977a3cdb59eea">
<label class="c-question__label" for="question-977a3cdb59eea">Enter an address or zip code</label>
<div class="c-question__container">
<div class="input">
<input class="input" id="question-977a3cdb59eea" name="question["977a3cdb59eea" ]" type="text" />
</div>
</div>
</div>
<div class="mb-3">
<button aria-controls="ac-type-of-help" aria-expanded="false" class="btn-primary btn-toggle w-full mb-3" data-js="toggle">
<span>Select a type of help</span>
<svg aria-hidden="true" class="icon-ui">
<use href="#lucide-chevron-down"></use>
</svg>
</button>
<div aria-hidden="true" class="hidden" id="ac-type-of-help">
<fieldset aria-hidden="true" class="c-question" id="12629e8d446c5" tabindex="-1">
<legend class="sr-only" tabindex="-1">Select a type of help</legend>
<div class="c-question__container c-question__container-rows m-0">
<!--{ @for Should match the id of the input }-->
<!--{ @tabindex Add tabindex="-1" to insure focusable elements are not visible when parent is hidden }-->
<label class="option " for="62f445cfd94a2" tabindex="-1">
<!--{ @tabindex Add tabindex="-1" to insure focusable elements are not visible when parent is hidden }-->
<input id="62f445cfd94a2" name="option['12629e8d446c5']" required="" tabindex="-1" type="checkbox" value="career-services" />
<span class="option__base">
<svg aria-hidden="true" class="option__graphic" tabindex="-1">
<use href="#option-nyco-checkbox"></use>
</svg>
<span class="option__label">Career Services</span>
</span>
</label>
<!--{ @for Should match the id of the input }-->
<!--{ @tabindex Add tabindex="-1" to insure focusable elements are not visible when parent is hidden }-->
<label class="option " for="1088fcc03c3fa" tabindex="-1">
<!--{ @tabindex Add tabindex="-1" to insure focusable elements are not visible when parent is hidden }-->
<input id="1088fcc03c3fa" name="option['12629e8d446c5']" required="" tabindex="-1" type="checkbox" value="cash-expenses" />
<span class="option__base">
<svg aria-hidden="true" class="option__graphic" tabindex="-1">
<use href="#option-nyco-checkbox"></use>
</svg>
<span class="option__label">Cash & Expenses</span>
</span>
</label>
<!--{ @for Should match the id of the input }-->
<!--{ @tabindex Add tabindex="-1" to insure focusable elements are not visible when parent is hidden }-->
<label class="option " for="7476280c15507" tabindex="-1">
<!--{ @tabindex Add tabindex="-1" to insure focusable elements are not visible when parent is hidden }-->
<input id="7476280c15507" name="option['12629e8d446c5']" required="" tabindex="-1" type="checkbox" value="certification" />
<span class="option__base">
<svg aria-hidden="true" class="option__graphic" tabindex="-1">
<use href="#option-nyco-checkbox"></use>
</svg>
<span class="option__label">Certification</span>
</span>
</label>
<!--{ @for Should match the id of the input }-->
<!--{ @tabindex Add tabindex="-1" to insure focusable elements are not visible when parent is hidden }-->
<label class="option " for="8f95ffd6d632f" tabindex="-1">
<!--{ @tabindex Add tabindex="-1" to insure focusable elements are not visible when parent is hidden }-->
<input id="8f95ffd6d632f" name="option['12629e8d446c5']" required="" tabindex="-1" type="checkbox" value="child-care" />
<span class="option__base">
<svg aria-hidden="true" class="option__graphic" tabindex="-1">
<use href="#option-nyco-checkbox"></use>
</svg>
<span class="option__label">Child Care</span>
</span>
</label>
<!--{ @for Should match the id of the input }-->
<!--{ @tabindex Add tabindex="-1" to insure focusable elements are not visible when parent is hidden }-->
<label class="option " for="bc15a68fec19" tabindex="-1">
<!--{ @tabindex Add tabindex="-1" to insure focusable elements are not visible when parent is hidden }-->
<input id="bc15a68fec19" name="option['12629e8d446c5']" required="" tabindex="-1" type="checkbox" value="education" />
<span class="option__base">
<svg aria-hidden="true" class="option__graphic" tabindex="-1">
<use href="#option-nyco-checkbox"></use>
</svg>
<span class="option__label">Education</span>
</span>
</label>
<!--{ @for Should match the id of the input }-->
<!--{ @tabindex Add tabindex="-1" to insure focusable elements are not visible when parent is hidden }-->
<label class="option " for="3c554c1faa195" tabindex="-1">
<!--{ @tabindex Add tabindex="-1" to insure focusable elements are not visible when parent is hidden }-->
<input id="3c554c1faa195" name="option['12629e8d446c5']" required="" tabindex="-1" type="checkbox" value="english-math" />
<span class="option__base">
<svg aria-hidden="true" class="option__graphic" tabindex="-1">
<use href="#option-nyco-checkbox"></use>
</svg>
<span class="option__label">English & Math</span>
</span>
</label>
<!--{ @for Should match the id of the input }-->
<!--{ @tabindex Add tabindex="-1" to insure focusable elements are not visible when parent is hidden }-->
<label class="option " for="e9adacd3da0cd" tabindex="-1">
<!--{ @tabindex Add tabindex="-1" to insure focusable elements are not visible when parent is hidden }-->
<input id="e9adacd3da0cd" name="option['12629e8d446c5']" required="" tabindex="-1" type="checkbox" value="enrichment" />
<span class="option__base">
<svg aria-hidden="true" class="option__graphic" tabindex="-1">
<use href="#option-nyco-checkbox"></use>
</svg>
<span class="option__label">Enrichment</span>
</span>
</label>
<!--{ @for Should match the id of the input }-->
<!--{ @tabindex Add tabindex="-1" to insure focusable elements are not visible when parent is hidden }-->
<label class="option " for="3491f7c2d2fb9" tabindex="-1">
<!--{ @tabindex Add tabindex="-1" to insure focusable elements are not visible when parent is hidden }-->
<input id="3491f7c2d2fb9" name="option['12629e8d446c5']" required="" tabindex="-1" type="checkbox" value="family-services" />
<span class="option__base">
<svg aria-hidden="true" class="option__graphic" tabindex="-1">
<use href="#option-nyco-checkbox"></use>
</svg>
<span class="option__label">Family Services</span>
</span>
</label>
<!--{ @for Should match the id of the input }-->
<!--{ @tabindex Add tabindex="-1" to insure focusable elements are not visible when parent is hidden }-->
<label class="option " for="f4eb1053ae4ba" tabindex="-1">
<!--{ @tabindex Add tabindex="-1" to insure focusable elements are not visible when parent is hidden }-->
<input id="f4eb1053ae4ba" name="option['12629e8d446c5']" required="" tabindex="-1" type="checkbox" value="food" />
<span class="option__base">
<svg aria-hidden="true" class="option__graphic" tabindex="-1">
<use href="#option-nyco-checkbox"></use>
</svg>
<span class="option__label">Food</span>
</span>
</label>
<!--{ @for Should match the id of the input }-->
<!--{ @tabindex Add tabindex="-1" to insure focusable elements are not visible when parent is hidden }-->
<label class="option " for="21ff59c30bbca" tabindex="-1">
<!--{ @tabindex Add tabindex="-1" to insure focusable elements are not visible when parent is hidden }-->
<input id="21ff59c30bbca" name="option['12629e8d446c5']" required="" tabindex="-1" type="checkbox" value="health" />
<span class="option__base">
<svg aria-hidden="true" class="option__graphic" tabindex="-1">
<use href="#option-nyco-checkbox"></use>
</svg>
<span class="option__label">Health</span>
</span>
</label>
<!--{ @for Should match the id of the input }-->
<!--{ @tabindex Add tabindex="-1" to insure focusable elements are not visible when parent is hidden }-->
<label class="option " for="58ff771bd6a81" tabindex="-1">
<!--{ @tabindex Add tabindex="-1" to insure focusable elements are not visible when parent is hidden }-->
<input id="58ff771bd6a81" name="option['12629e8d446c5']" required="" tabindex="-1" type="checkbox" value="housing" />
<span class="option__base">
<svg aria-hidden="true" class="option__graphic" tabindex="-1">
<use href="#option-nyco-checkbox"></use>
</svg>
<span class="option__label">Housing</span>
</span>
</label>
<!--{ @for Should match the id of the input }-->
<!--{ @tabindex Add tabindex="-1" to insure focusable elements are not visible when parent is hidden }-->
<label class="option " for="df3ce54c79ee" tabindex="-1">
<!--{ @tabindex Add tabindex="-1" to insure focusable elements are not visible when parent is hidden }-->
<input id="df3ce54c79ee" name="option['12629e8d446c5']" required="" tabindex="-1" type="checkbox" value="identification" />
<span class="option__base">
<svg aria-hidden="true" class="option__graphic" tabindex="-1">
<use href="#option-nyco-checkbox"></use>
</svg>
<span class="option__label">Identification</span>
</span>
</label>
<!--{ @for Should match the id of the input }-->
<!--{ @tabindex Add tabindex="-1" to insure focusable elements are not visible when parent is hidden }-->
<label class="option " for="a7104e41a73f8" tabindex="-1">
<!--{ @tabindex Add tabindex="-1" to insure focusable elements are not visible when parent is hidden }-->
<input id="a7104e41a73f8" name="option['12629e8d446c5']" required="" tabindex="-1" type="checkbox" value="people-with-disabilities" />
<span class="option__base">
<svg aria-hidden="true" class="option__graphic" tabindex="-1">
<use href="#option-nyco-checkbox"></use>
</svg>
<span class="option__label">People with Disabilities</span>
</span>
</label>
<!--{ @for Should match the id of the input }-->
<!--{ @tabindex Add tabindex="-1" to insure focusable elements are not visible when parent is hidden }-->
<label class="option " for="2e6bfaac8edb3" tabindex="-1">
<!--{ @tabindex Add tabindex="-1" to insure focusable elements are not visible when parent is hidden }-->
<input id="2e6bfaac8edb3" name="option['12629e8d446c5']" required="" tabindex="-1" type="checkbox" value="work" />
<span class="option__base">
<svg aria-hidden="true" class="option__graphic" tabindex="-1">
<use href="#option-nyco-checkbox"></use>
</svg>
<span class="option__label">Work</span>
</span>
</label>
</div>
</fieldset>
</div>
</div>
<ul class="list-none p-0 m-0">
<li>
<article class="c-card c-card-transparent p-3 desktop:p-2 bg-scale-1" data-find-help="location">
<button aria-label="Queens SNAP Center / Job Center" class="w-full h-full top-0 left-0 absolute" data-find-help-embed="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3022.467058977991!2d-73.93554700789765!3d40.75175102308316!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x89c25f2bec1d95b1%3A0xe105bab7def501b3!2sQueens%20SNAP%20Center!5e0!3m2!1sen!2sus!4v1671829100780!5m2!1sen!2sus"></button>
<header class="c-card__header pb-2">
<span>
<h3 class="c-card__title text-h5">Queens SNAP Center / Job Center</h3>
</span>
</header>
<div class="c-card__body pt-2">
<ul class="c-card__features">
<li>
<svg class="icon-ui c-card__feature-icon" role="img">
<title>Get help with</title>
<use href="#lucide-heart-handshake"></use>
</svg>Home Energy Assistance Program (HEAP), Cooling Assistance Benefit, Supplemental Nutrition Assistance Program (SNAP)
</li>
<li>
<svg class="icon-ui c-card__feature-icon" role="img">
<title>Address</title>
<use href="#lucide-map-pin"></use>
</svg>32-20 Northern Blvd., Long Island City, 6th / 2nd Floor, Queens, NY 11101
</li>
</ul>
<a class="btn-small btn-secondary relative z-10" href="#find-help">
<span>Learn more<span class="sr-only"> more about Queens SNAP Center / Job Center</span>
</span>
<svg aria-hidden="true" class="icon-ui rtl:flip">
<use href="#lucide-external-link"></use>
</svg>
</a>
</div>
</article>
</li>
<li>
<article class="c-card c-card-transparent p-3 desktop:p-2 bg-scale-1" data-find-help="location">
<button aria-label="Richmond SNAP Center / Job Center" class="w-full h-full top-0 left-0 absolute" data-find-help-embed="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3027.654275073265!2d-74.07808694850792!3d40.63750577923879!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x89c24fcd27238975%3A0x63787db0e1e6b1c7!2sStaten%20Island%20Food%20Stamp%20Center!5e0!3m2!1sen!2sus!4v1671828956081!5m2!1sen!2sus"></button>
<header class="c-card__header pb-2">
<span>
<h3 class="c-card__title text-h5">Richmond SNAP Center / Job Center</h3>
</span>
</header>
<div class="c-card__body pt-2">
<ul class="c-card__features">
<li>
<svg class="icon-ui c-card__feature-icon" role="img">
<title>Get help with</title>
<use href="#lucide-heart-handshake"></use>
</svg>Home Energy Assistance Program (HEAP), Cooling Assistance Benefit, Supplemental Nutrition Assistance Program (SNAP)
</li>
<li>
<svg class="icon-ui c-card__feature-icon" role="img">
<title>Address</title>
<use href="#lucide-map-pin"></use>
</svg>201 Bay Street, 1st and 2nd Floor, Staten Island, NY 10301
</li>
</ul>
<a class="btn-small btn-secondary relative z-10" href="#find-help">
<span>Learn more<span class="sr-only"> more about Richmond SNAP Center / Job Center</span>
</span>
<svg aria-hidden="true" class="icon-ui rtl:flip">
<use href="#lucide-external-link"></use>
</svg>
</a>
</div>
</article>
</li>
<li>
<article class="c-card c-card-transparent p-3 desktop:p-2 bg-scale-1" data-find-help="location">
<button aria-label="Crotona SNAP Center / Job Center" class="w-full h-full top-0 left-0 absolute" data-find-help-embed="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3018.1327852153972!2d-73.89714054850306!3d40.84700837921609!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x89c2f46408bd568b%3A0x77f018191ab910c7!2sCrotona%20Job%20Center!5e0!3m2!1sen!2sus!4v1671829218325!5m2!1sen!2sus"></button>
<header class="c-card__header pb-2">
<span>
<h3 class="c-card__title text-h5">Crotona SNAP Center / Job Center</h3>
</span>
</header>
<div class="c-card__body pt-2">
<ul class="c-card__features">
<li>
<svg class="icon-ui c-card__feature-icon" role="img">
<title>Get help with</title>
<use href="#lucide-heart-handshake"></use>
</svg>Home Energy Assistance Program (HEAP), Cooling Assistance Benefit, Supplemental Nutrition Assistance Program (SNAP)
</li>
<li>
<svg class="icon-ui c-card__feature-icon" role="img">
<title>Address</title>
<use href="#lucide-map-pin"></use>
</svg>1910 Monterey Avenue, 5th / 2nd Floor, Bronx, NY 10457
</li>
</ul>
<a class="btn-small btn-secondary relative z-10" href="#find-help">
<span>Learn more<span class="sr-only"> more about Crotona SNAP Center / Job Center</span>
</span>
<svg aria-hidden="true" class="icon-ui rtl:flip">
<use href="#lucide-external-link"></use>
</svg>
</a>
</div>
</article>
</li>
<li>
<article class="c-card c-card-transparent p-3 desktop:p-2 bg-scale-1" data-find-help="location">
<button aria-label="Waverly SNAP Center / Job Center" class="w-full h-full top-0 left-0 absolute" data-find-help-embed="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3023.1768754527793!2d-73.99661294850564!3d40.73613337922783!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x89c259981b6255e3%3A0x85674a83b4b8bb4f!2sNew%20York%20City%20Human%20Resources!5e0!3m2!1sen!2sus!4v1671829302518!5m2!1sen!2sus"></button>
<header class="c-card__header pb-2">
<span>
<h3 class="c-card__title text-h5">Waverly SNAP Center / Job Center</h3>
</span>
</header>
<div class="c-card__body pt-2">
<ul class="c-card__features">
<li>
<svg class="icon-ui c-card__feature-icon" role="img">
<title>Get help with</title>
<use href="#lucide-heart-handshake"></use>
</svg>Home Energy Assistance Program (HEAP), Cooling Assistance Benefit, Supplemental Nutrition Assistance Program (SNAP)
</li>
<li>
<svg class="icon-ui c-card__feature-icon" role="img">
<title>Address</title>
<use href="#lucide-map-pin"></use>
</svg>32-20 Northern Blvd., Long Island City, 6th / 2nd Floor, Queens, NY 11101
</li>
</ul>
<a class="btn-small btn-secondary relative z-10" href="#find-help">
<span>Learn more<span class="sr-only"> more about Waverly SNAP Center / Job Center</span>
</span>
<svg aria-hidden="true" class="icon-ui rtl:flip">
<use href="#lucide-external-link"></use>
</svg>
</a>
</div>
</article>
</li>
<li>
<article class="c-card c-card-transparent p-3 desktop:p-2 bg-scale-1" data-find-help="location">
<button aria-label="Clinton Hill SNAP Center / Job Center" class="w-full h-full top-0 left-0 absolute" data-find-help-embed="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3025.600714223972!2d-73.97079904850682!3d40.68276587923367!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x89c25ba520bf8555%3A0xa07e6b91f20b035b!2sNYC%20Human%20Resources%20Administration%20Job%20Centers!5e0!3m2!1sen!2sus!4v1671829366834!5m2!1sen!2sus"></button>
<header class="c-card__header pb-2">
<span>
<h3 class="c-card__title text-h5">Clinton Hill SNAP Center / Job Center</h3>
</span>
</header>
<div class="c-card__body pt-2">
<ul class="c-card__features">
<li>
<svg class="icon-ui c-card__feature-icon" role="img">
<title>Get help with</title>
<use href="#lucide-heart-handshake"></use>
</svg>Supplemental Nutrition Assistance Program (SNAP)
</li>
<li>
<svg class="icon-ui c-card__feature-icon" role="img">
<title>Address</title>
<use href="#lucide-map-pin"></use>
</svg>495 Clermont Avenue, Brooklyn, NY 11238
</li>
</ul>
<a class="btn-small btn-secondary relative z-10" href="#find-help">
<span>Learn more<span class="sr-only"> more about Clinton Hill SNAP Center / Job Center</span>
</span>
<svg aria-hidden="true" class="icon-ui rtl:flip">
<use href="#lucide-external-link"></use>
</svg>
</a>
</div>
</article>
</li>
</ul>
</div>
<iframe allowfullscreen="" class="layout-map__map" data-find-help="map" loading="lazy" referrerpolicy="no-referrer-when-downgrade" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d193595.91476937002!2d-74.11976287675961!3d40.69740344255568!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x89c24fa5d33f083b%3A0xc80b8f06e177fe62!2sNew%20York%2C%20NY!5e0!3m2!1sen!2sus!4v1671829451108!5m2!1sen!2sus" style="border: 0;"></iframe>
</div>
The Find Help map presents a list of locations or offices for assisting users with in-person help. The list of offices can be filtered using location based search and categorical service filtering. It uses the Map Layout to present the list of locations in the sidebar region and a map in the content region. The map updates location information as the user narrows their search through filtering or clicks on individual office locations.
The “Learn More” button for each location should open a new tab to ensure that the user is able to easily navigate back to the map after viewing location details.
This example is for demonstration purposes only. In a live example, the Google Maps Platform, JavaScript API would be used to provide location based search and show multiple location markers on the map.
The ACCESS NYC GitHub repository contains a working example of the Find Help map retrieving office location data from a local endpoint and utilizing the Google Maps Platform to display locations on the map for users. The following modules are core scripts that provide this functionality.