Support

Account

Home Forums General Issues Adding Google Maps API Key Properly

Unread

Adding Google Maps API Key Properly

  • Hi All,
    I’m using the Google Maps field in ACF. I’ve followed the instructions at https://www.advancedcustomfields.com/resources/google-map/ for making this work with my theme (custom built using underscores as a base).

    I’ve added the api key to my functions file using method 1:

    // Method 1: Filter.
    function my_acf_google_map_api( $api ){
    $api[‘key’] = ‘xxx’;
    return $api;
    }
    add_filter(‘acf/fields/google_map/api’, ‘my_acf_google_map_api’);

    I then used the Google Maps Helper code to output the maps:

    <script src=”https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY”></script>
    <script type=”text/javascript”>
    (function( $ ) {

    /**
    * initMap
    *
    * Renders a Google Map onto the selected jQuery element
    *
    * etc….

    And it works fine. But only if I reference the API key as specified in the helper code. Which seems possibly insecure because your key is easily visible in your page source?

    I commented out the key script and it immediately stopped working.

    So, what’s the point of adding the key to my functions file if it doesn’t seem to actually be referenced or used? Am I doing it wrong? Should I be adding it somewhere else? Is it OK to have my key visible in my page source or is there a better method?

    Any insight would be appreciated. Thanks!

Viewing 1 post (of 1 total)

You must be logged in to reply to this topic.