Skip to content

Embedding #findthemasks donation sites page

Steve Mattingly edited this page May 26, 2020 · 21 revisions

A #findthemasks donation site map & list can be embedded easily on any webpage. You can view this embed here: https://findthemasks.com/give.html

Examples of our embedded map

How to embed the map

Add a iframe tag to your website:

<iframe style="width: 100%; height: 1000px; border: none;" src="https://findthemasks.com/give.html"></iframe>

The page has 3 core parts:

  1. Map of donation sites
  2. Filters
  3. List of donation sites

Some of these can be independently turned on or off via query-parameters:

  • ?hide-filters={true/false}
  • ?hide-list={true/false}

There are several types of filters that you can apply to the list and map:

  • state
  • accepting
  • orgType

All filter params should be URI encoded and you can use any filter you see in the dropdowns at https://findthemasks.com.

To target only one specific state, accepted items, or org type include:

?state=ca
?accepting=homemade masks
?orgType=hospital

Filtering for multiple items

To target multiple states, accepted items, or org type use comma separators:

?state=ca,ne,mi
?accepting=homemade masks,gloves
?orgType=hospital,public health facility

Setting the default map view

You can also initialize the map at a certain location using either:

?q={place or address like you would type into Google maps}

or

?coords={lat,lng}&zoom=12 (note, zoom is optional and will default to 11)

Translation

To translate the page into a supported language, include: ?locale=fr

Combining parameters

You can combine each parameter using & like so:

https://findthemasks.com/give.html?hide-list=false&state=ca&locale=fr&orgType=hospital