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 ArcGIS.com 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 ArcGIS.com 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. If your map includes a presentation, you will see a check box option to embed your presentation.
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.
7. By default, the embedded map includes the link View larger map in the ArcGIS.com 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.

Note:

Your organization may restrict members from sharing items outside the organization. If this is the case, users and publishers won't see options to share content or groups with everybody (public). Administrators, however, can choose to share any item in the organization publicly.

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 ArcGIS.com 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 ArcGIS.com 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.

You can find templates and their URLs in the Web Mapping Application group. Open the group and browse the various templates that are listed. Once you've found one you like, open the application and copy the URL from your browser's address bar.

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.