{"id":81361,"date":"2018-01-03T17:20:30","date_gmt":"2018-01-03T17:20:30","guid":{"rendered":"http:\/\/www.esri.com\/arcgis-blog\/products\/product\/uncategorized\/add-a-locator-map-to-your-website\/"},"modified":"2018-03-26T21:15:57","modified_gmt":"2018-03-26T21:15:57","slug":"add-a-locator-map-to-your-website","status":"publish","type":"blog","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/sharing-collaboration\/sharing-collaboration\/add-a-locator-map-to-your-website","title":{"rendered":"Add a locator map to your website"},"author":7641,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"open","ping_status":"closed","template":"","format":"standard","meta":{"_acf_changed":false,"_searchwp_excluded":""},"categories":[37511],"tags":[28051,24881,24891,34681],"industry":[],"product":[36821,36571,36551],"class_list":["post-81361","blog","type-blog","status-publish","format-standard","hentry","category-sharing-collaboration","tag-arcgis-online-tip","tag-embed","tag-embedding-maps","tag-locator","product-configurable-apps","product-arcgis-enterprise","product-arcgis-online"],"acf":{"short_description":"GIS offers much more than just the ability to put the proverbial \"dot on a map.\" But sometimes, that's all you need or want to do. Here's...","flexible_content":[{"acf_fc_layout":"content","content":"

GIS offers much more than just the ability to put the proverbial “dot on a map.” But sometimes, that’s all you need or want to do. Here’s a very simple way to accomplish just that, in a quick minute (far less time than it takes to read this post).<\/p>\n

*<\/span>
\nWhat’s a locator map?<\/span><\/h2>\n

While the precise definition of a locator map is elusive, for this post it’s a simple interactive map showing a location of interest (the dot). Often locator maps are embedded in websites to show a specific location. For example, you may want a map in a web page showing your business location, a meeting venue, a trail head, your state capitol, or where an event occurred.<\/span><\/p>\n

*<\/span>
\nThe method behind the dot<\/span><\/h2>\n

What’s needed is simple; a dot on a map, perhaps with some additional information\u2014like a title or description. And also a way to embed the map in a website. All of this can be easily accomplished using Search to create a map note (the dot), then saving and embedding the map.<\/p>\n

When you search for an address, place, or coordinate, you can add the result to a new or existing map notes layer in your map.\u00a0Map notes are saved with your map, and only you can edit them. The map note “dot” can include a simple title, or can be embellished to include descriptive text, images, links, and more. Map notes also include other useful graphic objects, such as polygons, lines, geometric shapes, text, and more.<\/p>\n

*<\/span>
\nHow to make your locator map<\/span><\/h2>\n

Begin with a web map you are viewing in the map viewer<\/a>, either one you have already authored, \u00a0or a new web map. Then just follow the steps below.<\/p>\n

Step 1.<\/strong>\u00a0Enter the location you want to find in the search box. Choose the correct location from the list of matches, or click the search button.<\/p>\n

\"\"<\/p>\n

Step 2.<\/strong> From the Search result, click Add to Map Notes. You can add the location to a new map notes layer, or an existing one if already present in your map.<\/p>\n

\"\"<\/p>\n

The location will be added to a map notes layer, and will display on your map using the search string as the title.<\/p>\n

\"\"<\/p>\n

Note the options in the pop-up to zoom to the location, get directions, or edit.<\/p>\n

Step 3.<\/strong> (optional) Click Edit if you want to move the marker, change the symbol, change the title, or add a description and links.\u00a0Map Notes are are saved with your map, so only you can edit them.<\/p>\n

\"\"<\/p>\n

The result:<\/p>\n

\"\"<\/p>\n

Step 4.<\/strong> Save the map, and share it publicly (Everyone).<\/p>\n

\"\"<\/p>\n

Step 5.<\/strong>\u00a0Click Embed In Website to configure how you want the embedded map to look, and to generate the HTML to copy and paste to your website.<\/p>\n

\"\"<\/p>\n

A.<\/strong> Choose the size of your map.<\/p>\n

Tip:<\/strong> Keep Allow responsive sizing<\/em> checked to ensure your map remains in the same aspect ratio when embedding into a responsively designed website.<\/p>\n

B.<\/strong>\u00a0Choose Map Options. You’ll want to keep your locator map simple, but you can also add extras like a home button, basemap toggle, and more.<\/p>\n

Tip:<\/strong> Keep Disable scroll zoom<\/em> checked 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> When finished, click Copy to capture the HTML embed code, then paste the code into your web page.<\/p>\n

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

Tip:<\/strong> To ensure you don’t inadvertently delete the web map used for your locator, set delete protection on the map. See How to prevent accidental deletion<\/a>.<\/p>\n

*<\/span>
\nFor more information<\/span><\/span><\/h2>\n