Skip To Content

Embed maps, apps, and groups

One of the ways you can share maps, apps, or a group of maps and apps is to include them in a web page such as a blog or your organization's website. ArcGIS Online provides the code you need, options for what to include, and layout options.

Embed a map

To embed a public map you've opened in Map Viewer, copy the ready-to-use HTML code and paste it into your website. Optionally, you can configure the embedded view of the map before copying the code. You can choose the size of your map, select map options, add a symbol to a location on the map, and choose a theme.

  1. In Map Viewer, open a saved map and click Share.
  2. Verify that the map is shared with everyone (public).
  3. Click Embed in Website.

    If this option is not available, it means the map is not public and you cannot embed it. If you are the owner of the map, and your organization allows sharing outside the organization, you can change its status to public.

  4. If the map contains a presentation, you will see two options under What would you like to embed? Click Map to embed the map. If you only want to embed the presentation, click Presentation.
  5. Optionally configure the map with the following:
    • Choose a map size.
    • Check the boxes for the options you want to include on the map: zoom control, home button, basemap selector (choose gallery or toggle), link to view larger map, disable scroll zoom, scale bar, location search (check to use current map extent for search), map details, legend (choose the active paneā€”map details or legend), and preview image (shows an image of the map while the app loads). A preview shows you where your options will appear on the map.
      Tip:

      If you included the option to view a larger map, the larger map opens in an embedded app in its own page. You can change the name of the link by editing View larger map in the HTML code.

    • Add a symbol to a specific location on the map. Use the Add Symbol tab to select the location and enter a title for the symbol, a description for the pop-up, and the URL to the image to display as your symbol. For best results, your image should be no larger than 120 pixels wide by 120 pixels high. Other sizes will be adjusted to fit. Acceptable image formats are PNG, GIF, and JPEG.
    • Choose a theme.
  6. Copy the HTML code that's provided.
  7. Paste the code into your web page where you want the map to appear.

Embed an app

You may want to embed an app in a website instead of embedding the map itself. Embedding an app can be useful in various scenarios. The following are some examples:

  • Show an app you have created using a configurable app template (for example, using the Basic Viewer or one of the Story Map templates) that includes all the app functionality you configured.
  • Improve data collection by embedding the Geoform app into your website.
  • Show a map that includes a premium service with embedded credentials, such as the World Routing Service, by embedding an app created from the Directions template or using the Directions widget in Web AppBuilder for ArcGIS.

You can embed an app in a website using the Embed in Website option provided when you embed a public web map. To embed the app instead of the map, modify the generated HTML code as described in the steps below. These steps can be used to embed an ArcGIS Online hosted web app or a Web AppBuilder for ArcGIS app.

  1. Create a map and web app in ArcGIS Online.
  2. Copy the URL for the app from the Overview tab of the app's item page or from the address bar in your browser when the app is open.
  3. In Map Viewer, open the map used to create the app and click Share.
  4. Verify that the map is shared with everyone (public), and click Embed in Website.

    If this option is not available, it means the map is not public and you cannot embed it. If you are the owner of the map, and your organization allows sharing outside the organization, you can change its status to public.

  5. Select the desired size for embedding the map.
  6. From the HTML code that's provided, remove the portion of the code that comes after src= and before ></iframe> and replace it with the app URL you copied.

    For example, you would remove "http://arcgis.com/apps/Embed/index.html?webmap=4cc9f0ba8e8c4d68b50c01c17efd4730" and replace it with "http://arcgis.com/apps/View/index.html?appid=6b6a075eca8d4899958fb273710a6806". The updated portion of code should look similar to the following:

    <iframe width="500" height="400" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" 
    src="http://arcgis.com/apps/View/index.html?appid=6b6a075eca8d4899958fb273710a6806"></iframe>
  7. Copy and paste the entire HTML code block to the website configuration.
    Tip:

    You can also use URL parameters to control the look and feel or functionality of the app that you are embedding.

Embed a group of maps and web apps

When you embed a group through ArcGIS Online, you choose a layout and how to display the group items. You can only embed public groups, and only maps and web apps display in the embedded gallery.

  1. Open the public group you want to embed.
  2. On the Overview tab, click Share and click Embed in a Website.

    If this option is not available, it means the group is not public and you cannot embed it. If you are the owner of the group, and your organization allows sharing outside the organization, you can change its status to public.

  3. Choose a layout for the group items.
  4. Choose how to display the maps and web app: over the embedded gallery, in a new window with a predefined gallery app, or in a new window with a configured app.
    1. Select a predefined gallery app if you chose to display the items in a new window.
    2. Enter a URL to your app if you chose to display the items in a new window with a configured app.
  5. Copy the HTML code that's provided.
  6. Paste the code into your web page where you want the group to appear.