[isdg01Participant]

Hi,

I have added a Google Map to my Contact page. I would like it to be full width but so far have not been able to adjust the width.

Please help!
Dawn

[isdg01Participant]

This reply has been marked as private.

[isdg01Participant]

PS… I need the map to be 1980 x 500 px to match the rest of my header images.
Thanks!

[Nabeel AModerator]

Hi there,

Thanks for writing in! Please add the following code in your Customizer via Appearance > Customize > Custom > Edit Global CSS:

.page-id-26 #x-section-1 .x-container.max {
    max-width: 1980px !important;
}
.page-id-26 #x-section-1 .x-container.width {
    width: 100% !important;
}

Don’t forget to clear your browser’s cache after adding the code. Let us know how this goes!

[isdg01Participant]

Thanks. This piece of code made it full width, but now it’s way too tall. How can I restrict the height to 500px?

[JoaoModerator]

Hi There,

Please add to the Style Box of your google maps element:

max-height: 500px;

Hope that helps

Joao

[isdg01Participant]

That did not work at all. Map is now on top of my headers, copy and a portion of my contact form… Please feel free to take a peek at the site and let me know what I have done wrong.

Thanks,
Dawn

[ChristopherModerator]

Hi there,

To adjust the height, please use google map element. See the attachment.

Thanks.

[isdg01Participant]

That did the trick! Did not realize there were two separate Google Maps choices in Cornerstone… similar but different.

Thanks for the help and Happy Holidays!
Dawn

[isdg01Participant]

Unfortunately, I spoke too soon… everything looks correct while I am in Cornerstone. As soon as I save and exit to view the page, I get an error where the map should be that says “Oops! Something went wrong.
This page didn’t load Google Maps correctly. See the JavaScript console for technical details.”

I am not even going to claim to know how to fix anything with JavaScript! Where did I go wrong on this one?
Dawn

[Nabeel AModerator]

Hi again,

The current URL loading the Google Maps JavaScript API has not been added to the list of allowed referrers. Please check the referrer settings of your API key on the Google API Console.

See API keys in the Google API Console. For more information/ Also refer to this link as well http://stackoverflow.com/questions/35288250/google-maps-javascript-api-referernotallowedmaperror

Hope this helps!

[Author]

Posts