How to integrate an ArcGIS interactive map into a WordPress website

Integrating an ArcGIS interactive map into a WordPress website can be done in several ways depending on your needs—whether you’re using ArcGIS Online, ArcGIS Enterprise, or embedding a custom map application. Here’s a breakdown of the most common and effective methods:

---

Method 1: Embed an ArcGIS Online Map (Easiest Way)

If your map is hosted on ArcGIS Online:

Steps:

1. Go to your ArcGIS Online map viewer.
2. Open your web map or app, click the Share button.
3. Make sure the map is shared “Everyone (public)” if you want it accessible to all.
4. Click Embed in Website.
5. Customize the options (size, tools, etc.).
6. Copy the iframe embed code.
7. In WordPress:
   • Go to your page/post.
   • Use the Custom HTML block in the block editor.
   • Paste the embed code.
   • Save and publish.

Good for simple integrations without coding.

---

Method 2: Use a WordPress Plugin

There are plugins to simplify embedding or integrating ArcGIS content:

Recommended Plugin:

• GeoDirectory – Not ArcGIS specific but helpful for geolocation data.
• Mapplic – Supports custom maps (not direct ArcGIS but can be used alongside exports).
• If you have ArcGIS content as WMS/WMTS/WFS layers, you could use Leaflet Map plugins like:
  • Leaflet Map plugin (via shortcodes)
  • Maps Marker Pro (more advanced)

---

Method 3: Use ArcGIS JavaScript API (Custom Integration)

If you want full control and are embedding a custom web map or app, you can use the ArcGIS JavaScript API.

Steps:

1. Create a custom HTML/JavaScript map viewer using the ArcGIS JS API.
2. Host it either on your server or via a public code hosting service (like GitHub Pages).
3. Use an iframe to embed it into WordPress.
   • OR use the Insert Headers and Footers plugin to include the script and custom container.

<!-- In WordPress Custom HTML block or template -->
<div id="mapDiv" style="height: 500px;"></div>
<script src="https://js.arcgis.com/4.27/"></script>
<script>
  require(["esri/Map", "esri/views/MapView"], function(Map, MapView) {
    const map = new Map({
      basemap: "topo-vector"
    });

    const view = new MapView({
      container: "mapDiv",
      map: map,
      center: [-100.33, 25.69], // lon, lat
      zoom: 10
    });
  });
</script>

Method 4: Embed ArcGIS StoryMaps or Dashboards

1. Go to your ArcGIS StoryMap or Dashboard.
2. Share it and get the embed code (iframe).
3. Paste it into a Custom HTML block in WordPress.

---

Tips:

• Make sure any embedded map or app is publicly shared in ArcGIS.
• Use HTTPS in all URLs to avoid mixed content issues.
• If using Elementor, you can paste the embed code into an HTML widget.