Center Google Maps On Marker Contact Page

Support Forums for LiveMesh Themes & Plugins Forums Agile Theme Support Center Google Maps On Marker Contact Page

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #9501
    Columbiaseocolumbiaseo
    Member

    Hi there,
    I am uploaded the sample content and inserted my own map for the contact page, but for some reason, the map is not centered on the location. It is skewed to the right. This becomes a major problems on mobile devices, as you don’t see the marker/location at all. How do I force the embedded map to center on the marker?
    Thanks!

    #9526
    VeenaVeena
    Moderator

    You can create a responsive google map iframe by using custom CSS –
    Pls add the following custom CSS in themeoptions –

    .responsive-iframe-container {
        position: relative;
        padding-bottom: 56.25%;
        padding-top: 30px;
        padding-right: 30px;
        height: 0;
        overflow: hidden;
    }
    .responsive-iframe-container iframe,   
    .vresponsive-iframe-container object,  
    .vresponsive-iframe-container embed {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }
    

    And pls modify the embed code as in the screenshot.
    In your case pls add a higher value to padding right property.Hope this will solve your issue.

    #9583
    Columbiaseocolumbiaseo
    Member

    Hi, Thank you for your response but this didn’t change anything. I currently have a screenshot in place of the embedded map, because the embedded map will not center. I need it to center on computers as well as mobile devices. This is the embed code I used previously:

    <iframe src=”https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d13051.483615123087!2d-80.935652!3d35.134895!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x88569bd6ec1c8c21%3A0xcad3652b3d9ecdfa!2s8809+Lenox+Pointe+Dr%2C+Charlotte%2C+NC+28273!5e0!3m2!1sen!2sus!4v1412092930776&#8243; width=”1950″ height=”360″ frameborder=”0″ style=”border:0″></iframe>

    #9584
    Columbiaseocolumbiaseo
    Member
    This reply has been marked as private.
    #9619
    VeenaVeena
    Moderator

    In main.js file instead of line no:786 and 787 pls add the following code

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

    Pls ignore line no:2 in the above code

    #9621
    VeenaVeena
    Moderator

    Also pls ensure that your previous code in line no:786 and 787 are as shown below

    $("#content").fitVids({ customSelector: "iframe[src^='http://maps.google.com/']"});
         $("#content").fitVids({ customSelector: "iframe[src^='https://maps.google.com/']"});
    
Viewing 6 posts - 1 through 6 (of 6 total)
  • The forum ‘Agile Theme Support’ is closed to new topics and replies.