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 web page. 

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 in the Map Viewer, please re-open it now.
    
4. On the black strip running along the left side of the window, click More (the three dots below the Share button), then Embed Map.
   

   Figure 1.8 Opening the dialog for embedding a map in a website
   
   Note that AGO provides a few options for customizing the embedded map.  For example, it's possible to include the map's title and a legend. 
    
5. After making settings to your liking, click the Copy HTML button in the lower right of the window to copy the HTML code to your machine's clipboard.
   

   Figure 1.9 Copying the code for embedding a map in a web page
    
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.)