Add Google Maps API key

Permalink
How can I add my Google Maps API key to a maps block?

Without an API key, the maps block diplays:

Oops! Something went wrong.
This page didn't load Google Maps correctly. See the JavaScript console for technical details.

I read herehttps://www.latecnosfera.com/2016/06/google-maps-api-error-missing-k... that one would need to modify the source like this:
<script src="//maps.googleapis.com/maps/api/js?key=YOUR_API_KEY" async="" defer="defer" type="text/javascript"></script>


But I couldn't find a way to modify the source of this block.

Thanks for your help!

View Replies: View Best Answer
Advite replied on at Permalink Best Answer Reply
Advite
Hi lineinthesand,

You can download the Styled Maps add-on for free from the marketplace.

It is a Google maps block that has all the functionality of the standard Google maps block plus some added map & styling options.

I updated the add-on in June to now accept a Google maps API key from the front end, so no need to change source code.

You can find the add-on here ...

https://www.concrete5.org/marketplace/addons/styled-maps...

However, if you really would rather change the source code then let me know and I will point you to the files that need updating.

Hope this helps.
lineinthesand replied on at Permalink Reply
Thank you, that works (after I added the exact referer URL to the API key; for some reason, it did not accept the wildcard)!
Advite replied on at Permalink Reply
Advite
No problems. Glad you got it working.
lineinthesand replied on at Permalink Reply
Actually, I had found out about that Frame solution too, and I would really like to use this as I have one specially annotated map I'd like to show. The serious drawback of this solution is that it seems to be impossible to get directions to the place marked on the map (a Google limitation).
blinkdesign replied on at Permalink Reply
blinkdesign
as an alternative you can use a html block and use the generated "embed"-link from maps.google.com.
or you can use the responsive i-frame block, where you paste the url from maps.google.
how to disable the scroll whell on mobile ist something i haven't found out yet. maybe someone else can help.
Advite replied on at Permalink Reply
Advite
From my experience removing the horizontal & / or vertical bars from an iFrame can be a bit problematic.

What may seem to work in one browser may not work in another and the solutions seem to be rough workarounds at best.

According to documentation I have read, adding overflow:hidden; to your iframes css is the way to remove the scroll bars and still be HTML5 valid but personally I have had no luck when testing this. The scroll bars are always visible.

The other option (but not HTML5 compliant) is to add scrolling="no" to your iframe, for example;

<iframe src="www.somepage.com" scrolling="no"></iframe>

This will remove the scroll bars but the down side is the iframe is now static and can no longer be scrolled and will no longer be HTML5 valid.
MrKDilkington replied on at Permalink Reply
MrKDilkington
Hi lineinthesand,

The latest 5.7.5.9 release of concrete5 includes a quick fix for the core Google Map block. It now provides an input field for adding an API key and a check to see if it is valid.