How to change the map location in Contact Us page

Support Forums for LiveMesh Themes & Plugins Forums Squash Theme Support How to change the map location in Contact Us page

Tagged: ,

Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • #1039
    Livemeshlivemesh
    Keymaster

    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.

    #1050
    KelvinKelvin
    Member

    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?

    #1053
    Livemeshlivemesh
    Keymaster

    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/']"});
    
Viewing 3 posts - 1 through 3 (of 3 total)
  • You must be logged in to reply to this topic.