How do I render a Google static map with rendering variants?

Question

I'm looking to generate something like the following using Google Static Maps. How would I go about setting this up with rendering variants?

Answer 1

A few things to consider when approaching this:

• Where are the geo coordinates stored? Are the items in the content tree or somewhere else?
• Does the bulleted list on the left match the items on the map?
• Does the static map share the same API key used in the global map provider setting?

TIHIDI:

• Items used to source the list and map inherit from the SXA POI template; this allows for storage of the latitude and longitude. /sitecore/templates/Foundation/Experience Accelerator/Geospatial/POI
• The API key required for the static map was hardcoded in a Scriban rendering variant. A more ideal implementation would in some way extract the key from this item /sitecore/content/Tenant Folder/Tenant/Site/Settings/Maps Provider. Perhaps a Scriban function could be used to get the job done.

Assume a rendering variant configured like the following:

Google Maps Scriban Template

• Assumes the items for the marker are children of the current page.
• The map is hidden while in the Experience Editor.

{{ 
    i_contextitem = i_page
    latFieldId = "1DF37811-7355-4EE2-B1C7-ECBD6BE8DF44"
    lngFieldId = "38732912-D8C3-46C3-9E23-6933552429FA"
    apikey = ""
    markers = []
}}
{{ for i_child in i_page.children
    lat = i_child | sc_field latFieldId
    lng = i_child | sc_field lngFieldId
    if (!lat || !lng || lat == "" || lng == "")
        continue
    else
        markers = array.add markers ("markers=icon:https://your_marker_icon_url|" + lat + "," + lng)
    end
}}
{{ end }}
{{ markerstring = markers | array.join "&" }}
{{ if !o_pagemode.is_experience_editor }}
<div class="static-map">    
    <img loading="lazy" class="lazy" data-latlong="{{  i_contextitem | sc_field latFieldId }}|{{ i_contextitem | sc_field lngFieldId }}" data-src="https://maps.googleapis.com/maps/api/staticmap?key={{apikey}}&size=600x400&maptype=street&center={{  i_contextitem | sc_field latFieldId }},{{ i_contextitem | sc_field lngFieldId }}&{{markerstring}}" />
</div>
{{ else }}
<div class="static-map">
Static Map Hidden
</div>
{{ end }}

Content Scriban Template

• A custom function called sc_searchitems was built to query the items. Your solution may only require the OOTB function sc_query or getting the children with i_page.children.

<h3 class="field-promotitle">{{ sc_field i_item 'PromoTitle' }}</h3>
{{ sc_field i_item 'PromoText' }}
{{ 
   queryid = "{1A5CDCC5-EBB7-49B9-8C56-7E7F74BE0C26}"
   fieldname = "Title"
}}
<ul class="items">
  {{ for i_searchitem in ( sc_searchitems i_page queryid o: "Title,Ascending" p: 50 ) }}
  <li>{{ i_searchitem.Fields[fieldname] }}</li>
  {{ end }}
</ul>

Note: Example for creating the sc_searchitems function can be found here.

Answer 2

There are two options for you

1. You can use https://doc.sitecore.com/users/sxa/101/sitecore-experience-accelerator/en/add-a-map.html existing "MAP" rendering and you can use different options given in the document to show PINs

2. Integrate google API and create you own component and render the map

Let me know if you want to discuss further

Thanks, D