How can I add Google Maps to the Dawn theme?

Solved

How can I add Google Maps to the Dawn theme?

kirkcanada
Shopify Partner
156 13 25

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?

Accepted Solution (1)
kirkcanada
Shopify Partner
156 13 25

This is an 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!

 

 

View solution in original post

Replies 8 (8)

GemPages
Shopify Partner
5625 1261 1231

Hello @kirkcanada 

 

You can follow these steps:

1. Add address->Click the button share 

GemPages_1-1669945963934.png

2. Chose copy HTML

GemPages_2-1669946022455.png

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

GemPages_0-1669945762843.png

4. Open your theme.liquid file, paste the below code before </main>

GemPages_3-1669946220310.png

{%  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

 

GemPages - Build any high-converting store pages for any business


- If you find my reply helpful, please hit Like and Mark as Solution
- Get connected: App Store | Blog | Community | Help Center
kirkcanada
Shopify Partner
156 13 25

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

GemPages
Shopify Partner
5625 1261 1231

Hello @kirkcanada 

 

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

 - width="100%"

 - height ="600"  (Or maybe even bigger)

GemPages_0-1669966099654.png

I hope the above is useful to you.


Kind & Best regards,
GemPages Support Team

GemPages - Build any high-converting store pages for any business


- If you find my reply helpful, please hit Like and Mark as Solution
- Get connected: App Store | Blog | Community | Help Center
kirkcanada
Shopify Partner
156 13 25

This is an 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
Visitor
3 0 0

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
Visitor
1 0 0

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
Visitor
1 0 0

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
Visitor
1 0 0

PloverTailoring_0-1718638586582.png

 

@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 %}