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

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 </main>

{%  if template contains 'index' or template contains 'contact' %}
      <div class="google-map">
      <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>
    </div>      
      {%  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 · Accepted solution]

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!

[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 ? 

[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

[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' %}
<div class="google-map">
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3607.785474040041!2d55.345537074444536!3d25.27..." width="100%" height="450" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
</div>
{% 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