Embedding on websites

You can put the Nearby map on any web page with an iframe, and choose what to show: a place, your events, some categories, a city.

Privacy

The embedded map doesn't set cookies and doesn't profile traffic. The temporary data from its use, kept on the servers as a cache, is usually deleted after 24/48 hours, as stated in the Terms and Conditions.

The basic code

There are no requirements: copy and paste this code into the page.

<iframe
	src="https://embed.nearbycommunity.it/"
	allow="geolocation"
	width="100%"
	height="600"
	style="border:0"
></iframe>

• allow="geolocation" is only needed if you want the map to ask the visitor for their location (see geolocate).
• In width and height you can use px, pt or percentages. It's best to put the iframe in a div, with width and height at 100%, and set the size on the div.
• Don't put sandbox on the iframe. If you really need it, add allow-scripts allow-same-origin allow-popups allow-popups-to-escape-sandbox, otherwise Learn more won't open the new tab.

How to write the parameters

There are two equivalent ways:

• in the path (recommended), separated by /: https://embed.nearbycommunity.it/theme:dark/zoom:15/controls:true
• in the query string: https://embed.nearbycommunity.it/?theme=dark&zoom=15&controls=true

Lists are separated by commas: show:id1,id2.

The parameters

Parameter	Values	Default	What it does
theme	light, dark, auto	auto	the map theme; auto follows the device theme, even if it changes while the map is open
locale	for example it_it, en_us, fr_fr (also it, en)	the browser language, otherwise it_it	the language of the texts
center	lng,lat (for example 9.1189,39.2238)	the visitor's location or a default view	the point the map opens on
zoom	a number (for example 15)	18	the initial zoom
centerpoint	true, false	false	shows a dot on the visitor's location (if they've already shared it), otherwise on center
geolocate	user	empty	with user the map asks the visitor for their location; if empty, it never asks
target	poi, events, category	none	what to show: only places, only events or categories
show	list of ids (or of category slugs with target:category)	none	shows only these items or categories
hide	list of ids (or of category slugs)	none	hides these items or categories
user	username (the @ is optional)	none	shows only that user's items
card	open, close	close	with open, if show contains only one item, its card opens straight away
controls	true, false	false	shows the compass, 2D / 3D and zoom at the top left
block	true, false	false	locks the map: no panning, zooming, tilting or rotating, no controls; clicking on items still opens their card

Coordinates

Coordinates are written as longitude,latitude, with a dot for decimals: the comma only separates the two numbers. Correct: 9.1189,39.2238. Wrong: 9,1189,39,2238.

Old parameters

map_center (like center) and map_zoom (like zoom) also still work.

Good to know

• Automatic framing: with target:poi or target:events plus show, and without center, the map frames the listed items by itself.
• Card open straight away: with only one item in show and card:open, the card opens when the map loads.
• Scroll lock: at first the map is locked, so the page hosting it scrolls normally; the visitor clicks on the map to activate it, and the button at the top left locks it again. With block:true this step doesn't happen.
• Card: clicking an item opens its card on the right, with a button to expand or close it.
• Copyright: Nearby's copyright is at the bottom left; Learn more opens the Nearby website in a new tab.

Examples

The map of Cagliari, with the dark theme and the controls:

<iframe src="https://embed.nearbycommunity.it/center:9.1189,39.2238/zoom:15/theme:dark/controls:true" allow="geolocation" width="100%" height="600" style="border:0"></iframe>

A single place, with the card already open and the map locked:

<iframe src="https://embed.nearbycommunity.it/target:poi/show:PLACE_ID/card:open/block:true" width="100%" height="600" style="border:0"></iframe>

Only events, in English:

<iframe src="https://embed.nearbycommunity.it/target:events/locale:en_us/center:9.1189,39.2238/zoom:14" width="100%" height="600" style="border:0"></iframe>

Only some categories:

<iframe src="https://embed.nearbycommunity.it/target:category/show:bakery,concert/center:9.1189,39.2238/zoom:15" width="100%" height="600" style="border:0"></iframe>

Only a user's items, with the location request and the dot:

<iframe src="https://embed.nearbycommunity.it/user:mario/geolocate:user/centerpoint:true" allow="geolocation" width="100%" height="600" style="border:0"></iframe>

Where do I find the ids?

The id of an event or a place is in its link: for example in nrb.to/p/PLACE_ID or in app.nearbycommunity.it/view/poi/PLACE_ID.