Add optional physical-location map
This commit is contained in:
@@ -0,0 +1,9 @@
|
||||
---
|
||||
const { address, label = 'Business location' } = Astro.props;
|
||||
const mapUrl = `https://www.google.com/maps?q=${encodeURIComponent(address)}&output=embed`;
|
||||
const directionsUrl = `https://www.google.com/maps/search/?api=1&query=${encodeURIComponent(address)}`;
|
||||
---
|
||||
<section class="location-map" aria-labelledby="location-map-heading">
|
||||
<div class="map-copy"><p class="eyebrow">Find us</p><h3 id="location-map-heading">Visit the pack.</h3><p>{address}</p><a class="text-link" href={directionsUrl} target="_blank" rel="noopener">Get directions <span aria-hidden="true">↗</span></a></div>
|
||||
<iframe title={`${label} map`} src={mapUrl} loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
|
||||
</section>
|
||||
Reference in New Issue
Block a user