New Options for Embedding Maps

The December release of included a new and improved way to embed maps. This post will review the process for creating embedded maps and explore some of the options using the same web map for each example.

Accessing the Embed in Website dialog

In order to embed a map in a website it must be shared with Everyone.   From the Map Viewer click the Share buttonthen:

  1. Share the map with everyone.
  2. Click Embed In Website.

Example 1: Default map options and size

[iframe src=”,-25.4691,134.5999,76.0622&zoom=true&scale=true&theme=light&disable_scroll=true” width=”500″ height=”400″]

Configuring the Embed App

The embed app is highly configurable through the Embed in Website dialog window. Follow this simple 4-step process:

  1. Choose what you want to embed.  This post is concerned with maps, but you could also embed a presentation.
  2. Choose the size of your map in pixels.
  3. Choose the map options you want included. The Map Preview will give an idea of what your options will look like in the final product.
  4. Copy the code for embedding the map in your website then click Done.  The HTML can then be incorporated into your website.

Example 2: Configured to include the map options chosen above

[iframe src=”,-25.4691,134.7757,76.0622&home=true&zoom=true&scale=true&search=true&searchextent=true&details=true&legend=true&active_panel=legend&basemap_gallery=true&theme=light&disable_scroll=true” width=”100% height=”500″]

Example 3: Configured to use the basemap toggle and dark theme, the legend, home button, and scale bar have been turned off

[iframe src=”,-25.4691,134.7757,76.0622&zoom=true&scale=false&search=true&searchextent=true&details=true&basemap_toggle=true&alt_basemap=topo&theme=dark&disable_scroll=true” width=”100%” height=”500″]

Customizing the embed app beyond the UI options

Finally, there are several options worth exploring that are not accessible from the Embed in Website dialog, but are useful when embedding in a blog or website.

If you want any of the options below then you will need to do modify the url parameters within the embed code. For instance:

Example 4: Customized to use the map options listed above

[iframe src=”,-25.4691,134.5999,76.0622&zoom=true&scale=false&search=true&home=true&legend=true&%20active_panel=legend&basemap_gallery=true&theme=dark&popup_sidepanel=true&show_panel=true%20&logolink=” width=”100%” height=”500″]

Get more information on the Embed Map Url parameters.

About the author

Product Engineer for ArcGIS Online and Configurable App Templates


Next Article

Accessibility essentials for GIS and mapping

Read this article