How to change the map location in Contact Us page

[livemesh]

To change location in the maps displayed in the Contact Us page, go to maps.google.com and do the following –

https://docs.google.com/file/d/0B9j6FQo4cSQFLWZjUEdsYWE5YWs/edit?usp=drivesdk

Then copy the link and paste it into src attribute of the the shortcode at the end of the page as shown below –

[googlemap width="1140" height="300" link="false" src="http://maps.google.com/maps?f=q&source=embed&hl=en&geocode=&q=Eastlake,+Seattle,+WA,+United+States&aq=0&oq=eastlake+seattle&sll=47.645239,-122.332549&sspn=0.023535,0.04858&ie=UTF8&hq=&hnear=Eastlake,+Seattle,+King,+Washington&t=p&ll=47.642434,-122.326841&spn=0.027758,0.054932&z=14"]

Make sure you change the URL from https:// to http:// to make the maps responsive.

[Kelvin]

Hi LiveMesh,

This is my code on the contact us page … doesn’t work:

[segment id=”contact-us-section” class=”last-segment”]
[seven_col]
<h2>Contact Us Below</h2>
<p>… And we’ll get in touch with you as soon as we can (usually 48 hours) if necessary!</p>

[contact_form subject=”true” human_check=”true”]

[/seven_col]

[five_col_last]
<div id=”sidebar”>
<h2>Contact Information</h2>

<div id=”contact-sidebar” class=”contact-info”>
<h3 class=”label”>Our Office</h3>
<p>
<span class=”street1″>75 Bukit Timah Road<br>#05-10 Boon Siew Building<br>Singapore, 229833</span>
</p>

<h3 class=”label”>Contact Us</h3>
<p>
<span class=”phone”>+65 6338 8979</span>
<span class=”email”>admin [at] differworld.com</span>
</p>

<h3 class=”label”>Follow Us</h3>
[social_list twitter_url=”http://twitter.com&#8221; googleplus_url=”http://plus.google.com&#8221; youtube_url=”http://youtube.com&#8221; linkedin_url=”http://linkedin.com&#8221; flickr_url=”http://flickr.com&#8221; facebook_url=”http://facebook.com&#8221; include_rss=”true” align=”left”]
</div>
</div><!–#sidebar–>

[/five_col_last]
[/segment]

[googlemap width=”1140″ height=”300″ link=”false” src=”http://maps.google.com.sg/maps?q=Boon+Siew+S%27Pore+Pte&hl=en&sll=1.307029,103.847762&sspn=0.002639,0.004128&hq=Boon+Siew+S%27Pore+Pte&t=m&z=19″%5D

What am I doing wrong?

[livemesh]

Works fine for me when pasted into a page with page template ‘Full Width’. I was not sure what you meant when you say it does not work. I suggest you wrap the googlemap shortcode in a [segment] shortcode to constrain its width to 1140px like below –

[segment][googlemap width="1140" height="300" link="false" src="http://maps.google.com.sg/maps?q=Boon+Siew+S%27Pore+Pte&hl=en&sll=1.307029,103.847762&sspn=0.002639,0.004128&hq=Boon+Siew+S%27Pore+Pte&t=m&z=19"][/segment]. 

Alternatively, you can increase the size from 1140 to width="1940" height="400" to make it look better on bigger monitors.

To make the maps responsive though, pls look for it in line 313 and make the following change to your {theme directory}/js/main.js file to changed google maps domain name –

$("#content").fitVids({ customSelector: "iframe[src^='http://maps.google.com.sg/']"});

[Author]

Posts