1.2.1 Embedding a Map

1.2.1 Embedding a Map

While it's sometimes preferable to share the link to your map -- allowing it to fill the viewer's browser window -- it can also be useful to embed the map within a page of content. 

1. Save this example page to your computer.  (Right-click on the link and choose Save.)
    
2. Open the page in a plain text editor of your choosing (e.g., Notepad).
    
3. If your ArcGIS Online map is no longer open, go to our Penn State organization page, click the Content tab, click on the map you created earlier, then select Open > Open in map viewer.
    
4. Click Share, then EMBED IN WEBSITE.
   

   Figure 1.8 Opening the dialog for embedding a map in a website
   
   Note that ArcGIS Online provides a number of options for customizing the embedded map.  For example, it's possible to specify the dimensions of the map, and to include widgets such as a base map selector or legend. 
    
5. After making settings to your liking, find the wide text box just above the Map Options.  This box contains the HTML code required to embed your map within a web page.  Click the COPY button to the right of that text box to copy the HTML code to your machine's clipboard.
   

   Figure 1.9 Copying the code for embedding a map in a website
6. Paste that code into your HTML document just beneath the My ArcGIS Online Map heading.  Double-check the URL to your map.  If it doesn't include the http: protocol, you will need to add it in front of //pennstate.maps.arcgis.com in the html code for your map to connect properly.
   

   Figure 1.10 Pasting code to embed a map in a website
7. Save your HTML document with a name like lesson1.html.
    
8. Using the File Explorer in Windows, browse to the document you just saved and double-click on it to open it in a web browser.  (If .html files aren't set to open in a web browser on your machine, you may need to right-click and select Open With.)
    
9. If you get an error that your map cannot be loaded or found (a blank grey box under your title), go back into your HTML file and add http: before //pennstate.maps.arcgis (etc). so that it looks like :
   http://pennstate.maps.arcgis.com/apps/Embed......