Adding IFrame Map to Contact Us Page

Solved
Highlighted
Tourist
21 1 0

Hello, hope everyone is well. I am trying to add the Map (iframe html) to the contact us page. Let me know what code to use.
The area where I want the map is highlighted as the Square.
http://www.watsinternationalinc.com Please see below.
Map_help.png

0 Likes
Highlighted
Shopify Partner
217 4 16

Hi, @JimWatts I can do this for you but it will be a one-time paid service so if interested please feel free to mail me anytime. Thanks and Best Regards 

If helpful then please Like and Accept Solution.
Do you need custom changes on the store or want a complete speed optimization? Hire me.
Need a dropshipping expert or wants to alive your dead dropshipping store?
Feel free to contact me at Syedmustafanadeem99@gmail.com
0 Likes
Highlighted
Tourist
21 1 0

Hello, Please email me @ steven.wang@watsinternational.com
I also want to add SOLD OUT on items that are SOLD OUT before you click on them.
So right now, it doesn't say sold out until I get to the item details.

0 Likes
Highlighted
Tourist
21 1 0

This is an accepted solution.

I have created this for someone moving forward. This is a simple work-around to get the Map on your Contact Page without the API and with 2 side by side Frames. First add: 

to your theme.scss.liquid.

.one-half-column-left {
width:48%;
float:left;
}

.one-half-column-right {
width:48%;
float:right;
}

@media only screen and (max-width: 600px) {
.one-half-column-left, .one-half-column-right, 
.one-third-column, .one-third-column-last {
float:none;
width:100%;
margin-right:0;
}
}

 

Then create a new page or edit your contact page html to: 


<!-- /templates/page.contact.liquid -->
<h1 class="small--text-center">{{ page.title }}</h1>
<div class="one-half-column-left">
<p><div class="rte">
{{ page.content }}
</div>

<div class="contact-form form-vertical">
{% form 'contact' %}

{% if form.posted_successfully? %}
<p class="form--success">
{{ 'contact.form.post_success' | t }}
</p>
{% endif %}

{{ form.errors | default_errors }}

<label for="ContactFormName" class="label--hidden">{{ 'contact.form.name' | t }}</label>
<input type="text" id="ContactFormName" name="contact[{{ 'contact.form.name' | t }}]" placeholder="{{ 'contact.form.name' | t }}" autocapitalize="words" value="{% if form[name] %}{{ form[name] }}{% elsif customer %}{{ customer.name }}{% endif %}">

<label for="ContactFormEmail" class="label--hidden">{{ 'contact.form.email' | t }}</label>
<input type="email" id="ContactFormEmail" name="contact[email]" placeholder="{{ 'contact.form.email' | t }}" autocorrect="off" autocapitalize="off" value="{% if form.email %}{{ form.email }}{% elsif customer %}{{ customer.email }}{% endif %}">

<label for="ContactFormPhone" class="label--hidden">{{ 'contact.form.phone' | t }}</label>
<input type="tel" id="ContactFormPhone" name="contact[{{ 'contact.form.phone' | t }}]" placeholder="{{ 'contact.form.phone' | t }}" pattern="[0-9\-]*" value="{% if form[phone] %}{{ form[phone] }}{% elsif customer %}{{ customer.phone }}{% endif %}">

<label for="ContactFormMessage" class="label--hidden">{{ 'contact.form.message' | t }}</label>
<textarea rows="10" id="ContactFormMessage" name="contact[{{ 'contact.form.message' | t }}]" placeholder="{{ 'contact.form.message' | t }}">{% if form.body %}{{ form.body }}{% endif %}</textarea>

<input type="submit" class="btn" value="{{ 'contact.form.send' | t }}">
</div>
{% endform %}</p>
</div>
<div class="one-half-column-right">
<p><iframe src="https://www.google.com/maps/embed?pb=!1m26!1m12!1m3!1d95258.45973530637!2d-73.99636269138205!3d41.74..." width="600" height="450" frameborder="0" style="border:0;" allowfullscreen="" aria-hidden="false" tabindex="0"></iframe></p>
</div>
<br style="clear:both;" />

 

Edit the two columns with your contact fields and map or image etc.

0 Likes