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>