{"id":75141,"date":"2017-01-24T20:10:23","date_gmt":"2017-01-24T20:10:23","guid":{"rendered":"http:\/\/www.esri.com\/arcgis-blog\/products\/product\/uncategorized\/embedding-web-maps\/"},"modified":"2019-09-12T13:59:49","modified_gmt":"2019-09-12T20:59:49","slug":"embed-web-maps","status":"publish","type":"blog","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/arcgis-online\/mapping\/embed-web-maps","title":{"rendered":"How to embed web maps"},"author":7641,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","format":"standard","meta":{"_acf_changed":false,"_searchwp_excluded":""},"categories":[22941],"tags":[28701,24881,24891,32771],"industry":[],"product":[36571,36551],"class_list":["post-75141","blog","type-blog","status-publish","format-standard","hentry","category-mapping","tag-arcgis-online-tutorial","tag-embed","tag-embedding-maps","tag-help-resource","product-arcgis-enterprise","product-arcgis-online"],"acf":{"short_description":"You can use web map in lots of ways, including embedding them in your website or blog. Here's how.","flexible_content":[{"acf_fc_layout":"content","content":"

One of the ways you can share maps is to embed them in a web page, such as your organization\u2019s website.\u00a0ArcGIS Online\u00a0automatically generates the HTML you need, and also provides options for what to include in your embedded map.<\/p>\n

*<\/span>
\n<\/span><\/h2>\n

How to embed a map<\/span><\/h2>\n

Web maps are easy to embed in websites and blogs. To embed your map follow these steps.<\/p>\n

Step 1.<\/strong> Using the map viewer, save any changes you may have made, then click Share.<\/p>\n

\"\"<\/p>\n

Step 2.<\/strong> Share the map publicly. This enables the Embed In Website button shown in Step 3 below.<\/p>\n

\"\"<\/p>\n

Step 3.<\/strong> Choose Embed In Website.<\/p>\n

\"\"<\/p>\n

Step 4.<\/strong> Choose the embed options as desired.<\/p>\n

A.<\/strong> Specify the size of your map. It’s recommended that you leave Allow responsive sizing<\/em> checked. This ensures the map will use the available width while maintaining the aspect ratio.<\/p>\n

B.<\/strong> Choose the desired Map Options. For example, you may want to include a view larger link, or a Home button, or may want a dark theme instead of a light one.<\/p>\n

Map Options are a powerful feature, enabling you to customize your embedded map experience in a variety of ways, similar to some configurable apps.<\/p>\n

Tip:<\/strong>\u00a0Keep\u00a0Disable scroll zoom<\/em>\u00a0checked to prevent scroll from zooming the map, instead of scrolling the web page. Viewers can still navigate the map by panning, or clicking zoom in\/out buttons.<\/p>\n

C.<\/strong> Any changes you make will automatically modify the HTML. When finished, click Copy to capture the HTML to the clipboard to paste into your website or blog.<\/p>\n

D.<\/strong> Click Done to dismiss the dialog.<\/p>\n

\"\"<\/a><\/p>\n

Tip:<\/strong> While you can embed any publicly shared map in your website or blog, using a map that you, or your organization, owns and maintains control over is best. You can set delete protection to ensure the map is not accidentally removed.\u00a0See\u00a0How to prevent accidental deletion<\/a>.<\/p>\n

*<\/span><\/h2>\n

Add a <\/span>View larger map<\/span> link<\/span><\/h2>\n

An option you can enable for your embedded map is View larger map. It’s a link a visitor to your site can click to see and interact with a larger version of your map, outside the context of the hosting web page or blog. Check the box in the Map Options (see 5B above) to enable View larger map.<\/p>\n

\"\"<\/p>\n

A View larger map link will be added to the HTML, and will appear on the left, below your map, when you embed it.<\/p>\n

\"\"<\/p>\n

You can edit the embed HTML to change the link text, size, color, and more using standard markup.<\/p>\n

*<\/span><\/h2>\n

View larger map alternatives<\/span><\/h2>\n

When using the default View larger map link, your map will open in a new browser or tab with the selected map options (see 5B above). An alternative is to edit the link so that it opens within a different app that showcases your map, and also provides a different user experience.<\/p>\n

To make a substitution for the default, modify the link found in the embed HTML to point to the app. For example, shown below is the <a> tag portion of the default markup that adds a \u201cView larger map\u201d link.<\/p>\n

[code language=”html” gutter=”false”]
\n<a href=”\/\/bwszukalski.maps.arcgis.com\/apps\/Embed\/index.html?
\nwebmap=04bcb23f88e54dcabf873a00dd66d9ad&amp;
\nextent=-123.6139,25.0166,-70.2642,48.6987
\n&amp;zoom=true&amp;scale=true
\n&amp;disable_scroll=true&amp;theme=light”
\nstyle=”color:#0000FF;text-align:left”
\ntarget=”_blank”>View larger map<\/a>
\n[\/code]<\/p>\n

Below the HTML has been modified to substitute a URL that opens the map using the Basic Viewer instead.<\/p>\n

[code language=”html” gutter=”false”]
\n<a href=”\/\/bwszukalski.maps.arcgis.com\/apps\/View\/index.html?
\nwebmap=04bcb23f88e54dcabf873a00dd66d9ad” style=”color:#0000FF;
\ntext-align:left” target=”_blank”>View larger map<\/a>
\n[\/code]<\/p>\n

To obtain the URL, share and configure the map in a different app template, or use the “quick share” technique described in Quickly share your map using an app<\/a>.<\/p>\n

*<\/span><\/h2>\n

For more information<\/span><\/h2>\n