How can I add Google Maps to the Dawn theme?

[kirkcanada]

I’m using the dawn theme and I want to add a map to either the bottom of my home page or on the contact page.

I watched this video for a different theme, but it doesn’t seem to work for the dawn theme.

[https://www.youtube.com/watch?v=-ml8m0U-B4w](http:// https://www.youtube.com/watch?v=-ml8m0U-B4w)

How can I add a google map?

[GemPages]

Hello @kirkcanada

You can follow these steps:

1. Add address->Click the button share

2. Chose copy HTML

3. Go to Online Store->Theme->Edit code

4. Open your theme.liquid file, paste the below code before

{%  if template contains 'index' or template contains 'contact' %}
      
      <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d193595.15830869428!2d-74.119763973046!3d40.69766374874431!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x89c24fa5d33f083b%3A0xc80b8f06e177fe62!2sNew%20York%2C%20NY%2C%20USA!5e0!3m2!1sen!2s!4v1669945987312!5m2!1sen!2s" width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
    
      
      {%  endif %}

Note: replace my Iframe with the Iframe you just copied in step 2

I hope the above is useful to you.

Kind & Best regards,
GemPages Support Team

[kirkcanada]

Thanks for your post. I tried that and it’s showing up, but half the width of the section and very small.

[GemPages]

Hello @kirkcanada

You can change width and height in Iframe to suit your needs:

• width=“100%”

• height =“600” (Or maybe even bigger)

I hope the above is useful to you.

Kind & Best regards,
GemPages Support Team

[kirkcanada]

Gempages,

Sorry for the late response. I really do appreciate the time you took to explain this to me.

After changing the with to 100% I now have a response google map embedded.

This work brilliantly.

Thanks for being so smart!

[Flowers1]

Thank you for the solution - it works well. I would like the embedded map to be centred rather than on the left - is there a simple change to the code? Thanks

[homiesgonnamiss]

Hi there I have followed all the steps and have a responsive google map but right under the header of home page I want it at the bottom just above the footer. Can you please help me ?

[casper181]

i did this and it looks like its sitting on the foot on every page. Is there anyway to code it to sit only on the contact page?

[PloverTailoring]

@casper181

Write the name of page where you want to see the MAP {% if template contains ‘contact’ %} or if you want to see in two pages like home and contact use it as {% if template contains ‘contact’ or template contains ‘index’%} than it will show in two pages.

{% if template contains ‘contact’ %}

{% endif %}

[brunocosta0]

Thank you for the solution - it works well. I would like the embedded map to be centred rather than on the left. How can I do it? Thanks

[orestis-z]

If you’re looking for a simpler way to add Google Maps (with multi-location support, auto-detection, and no manual coding), I built IzyMaps specifically for Dawn and other Shopify themes. It’s a plug-and-play solution with a free tier.

Full transparency: I’m the developer, but happy to answer any questions about it or the manual approach above!

[EmbedAny]

Hi @kirkcanada
To embed Google Maps in your Shopify store, I suggest using an app. It can embed your desired map without writing a single line of code. One such app is EmbedAny, which doesn’t just embed Google Maps—it supports over 800 platforms.

You may install the app, first. App link: Embed Any Social Media w/ Link - Embed Interactive Content on Shopify | Shopify App Store

You may embed your link easily by following these steps:

First, copy the link to your desired Google Maps location and paste it into the rich text editor in your Shopify admin panel. Make the link italic and save it. Preview to see the changes.

The result would be like this:

Hope, it will be helpful for you.