Embedding web maps

One of the ways you can share a web map is to include it in a web page such as a blog or your organization's website. The map viewer provides the code you need and gives you options for the size of the map and tools to include, such as a scale bar, zoom control, and location search. You can also include a link to open a larger view of the map. To embed a map, select the options you want and copy and paste the text into your web page.

To embed a web map in a website, follow the steps below.

Steps:

1. Open a saved web map in the map viewer.
2. Click the Share button to open the Share window.
3. Share the map with everybody (public). You can only embed maps that are shared with everybody (public).
4. Click the Embed in Website button.

   The Embed in a website window is displayed.

5. Check the boxes for the options you want to include on the map: zoom control, scale bar, legend, description, location search, and basemap selector.
6. If you checked Show location search in the previous step, check the box for Use current map extent for location search if you want to restrict locating addresses and places to the extent of your map. This functionality is present in Portal for ArcGIS 10.2.1 and later releases.
7. By default, the embedded map includes the link View larger map in the map viewer. Uncheck this option if you do not want to include a link. You can also change the name of the link.
8. Choose a map size.
9. Select and copy the HTML code that's provided.
10. Paste the code into your web page where you want the map to appear.

Opening a larger view of the map in an application

By default, the View Larger Map link included with an embedded map opens the map in the map viewer. The map viewer offers functionality that may not be needed by users who just want to view the embedded map at a larger size. In these cases, you may want to display the map in an application that offers a more limited view of the map. You can do this by editing the URL in the embed code to point to another application.

Here's an example of the embed code that opens the map in the map viewer.

<iframe width="500" height="400" frameborder="0" scrolling="no" marginheight="0" marginwidth="0"
 src="http://www.arcgis.com/home/webmap/embedViewer.html?webmap=a07c19c998954d35a43e98fa3797a705&extent=67.6748,-0.907,78.8259,7.291">
</iframe><br/><small>
<a href="http://www.arcgis.com/home/webmap/viewer.html?webmap=a07c19c998954d35a43e98fa3797a705&extent=67.6748,-0.907,78.8259,7.291"
 style="color:#0000FF;text-align:left" target="_blank">View Larger Map</a></small>

The URL includes a URL parameter named webmap. This parameter tells the application which web map to display. For more information, see Using URL parameters. To change the display application you need to update the URL to point to an application that can display a web map based on an input web map ID. All of the templates in the website work with the webmap URL parameter so you can switch the embedded map to use any of the templates.

Here's the same example updated to open the map in the Legend template.

<iframe width="500" height="400" frameborder="0" scrolling="no" marginheight="0" marginwidth="0"
 src="http://www.arcgis.com/home/webmap/embedViewer.html?webmap=a07c19c998954d35a43e98fa3797a705&extent=67.6748,-0.907,78.8259,7.291">
</iframe><br/><small>
<a href="http://www.arcgis.com/apps/Legend/main/index.html?webmap=a07c19c998954d35a43e98fa3797a705"
 style="color:#0000FF;text-align:left" target="_blank">View Larger Map</a></small>

Tip:

The embed code includes a parameter for defining the extent of the embedded map and the larger map. The templates ignore the extent parameter; they open the map to the extent defined when the web map was last saved. You can remove the extent parameter for the larger map if you want.