As of April 20, 2023, the Instant Articles API no longer returns data. Instant Articles API endpoints cannot be called on v17 or later and will be removed entirely on August 21, 2023.

Map

Maps can be added to Instant Articles to provide additional context about to the story being told in the article.

Maps are defined using a standard HTML <figure> element with the op-map class and its geotag information is specified using the GeoJSON format. The <figure> element representing the map must be included standalone within the body of the article and not enclosed within a <p> element.

Options

Name	Description	Definition
Caption	Descriptive text for your map.	Add the Caption element to your `<figure>` element representing this map.
Geotag [required]	Location for the pin on your map.	Add the `op-map` class to the `<figure>` representing your map and define the location using the GeoJSON format.

Examples

Basic map

To include a map within your Instant Article, use a <figure> element with the op-map class attached. This <figure> must include a JSON <script> in GeoJSON format with the op-geotag class attached.

<figure class="op-map">
  <script type="application/json" class="op-geotag">  
    {
      "type": "Feature",
      "geometry": 
        {
          "type": "Point",
          "coordinates": [23.166667, 89.216667]    
        },    
      "properties": 
        {      
          "title": "Jessore, Bangladesh",      
          "radius": 750000,      
          "pivot": true,      
          "style": "satellite",
        }
     }  
  </script>
</figure>

Map with caption

You can add a caption to your map by adding a <figcaption> element within the same <figure> element representing the map within your article.

<figure class="op-map">
  <script type="application/json" class="op-geotag">  
    {
      "type": "Feature",
      "geometry": 
        {
          "type": "Point",
          "coordinates": [23.166667, 89.216667]
        },    
      "properties": 
        {      
          "title": "Jessore, Bangladesh",      
          "radius": 750000,      
          "pivot": true,      
          "style": "satellite",
        }
     }  
  </script>
  <figcaption>
    <h1>Map Caption</h1>
  </figcaption>
</figure>