Is there a way of having Interactive Map for free? Dawn and Spark Theme

[LSAccounting]

Is there a way of adding a Google Maps link so the map pops up on my Contact Us Page - The kind of map that you can move around, zoom in, zoom out? 

I would like it on my Spark as well as my Dawn Theme Websites. 

Currently, I have just got a screenshot of the map as a picture. 

TIA

[Shay · Accepted solution]

Hey there @LSAccounting 

You absolutely can! You can use the embed code option as a "custom liquid" section on the page template. It will set to left justified by default, but if you want to manage the position of the map, you can use this base code below and adjust the CSS for "justify-content" and "align-items" to the preferred position (left/right/center). You can also use a free tool like ChatGPT to help you with these kinds of CSS customizations. 

Remember that altering page templates will affect all pages using the same template, so you may need to make a new page template for certain pages. Let me know if you need additional help with that. Our live chat support would be happy to help with this too. 

<style>
  .map-container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
  }

  .map-container iframe {
    max-width: 100%;
    max-height: 100%;
  }
</style>

<div class="map-container">
  <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2624.991441025277!2d2.2919063758503166!3d48.85837360070855!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x47e66e2964e34e2d%3A0x8ddca9ee380ef7e0!2sEiffel%20Tower!5e0!3m2!1sen!2sca!4v1692111864170!5m2!1sen!2sca" width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
</div>

[LSAccounting]

Hi @Shay, 

Thank you! It worked but what I did is simply paste the code in the Page's HTML and the map appeared in the middle of my page pretty wide screen too. I don't know how I didn't think of doing that before. 

Check it out! 

https://www.lsaccountingfirm.com/pages/contact-us

🙂 

[Shay]

Awesome! So happy that worked for you! Don't hesitate to let us know here in the community if you need any help with designing any other areas of your theme. 

[Marianna_YTTG]

Thanks for this straightforward solution, Shay!

I am also seeing some online articles around adding a Google Map API key to my store. Can you please clarify under which circumstances that is necessary?

This Shopify Help article implies that this is only necessary for vintage themes? Is this correct?

https://help.shopify.com/en/manual/online-store/themes/themes-by-shopify/vintage-themes/customizing-...