Center Google Maps On Marker Contact Page

[columbiaseo]

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!

[Veena]

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.

[columbiaseo]

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>

[columbiaseo]

This reply has been marked as private.

[Veena]

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

[Veena]

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/']"});

[Author]

Posts