Tet banner

Custom Fields
Re-Envisioned
Support MB Views Invalid key map error

  • Creator
    Topic
  • #30741
    Resolved Kirb
    Participant

    Hi, I tried showing the google map on the front using views but I encountered this error.

    Console Error:

    js?key=AIzaSyC1mUh87SGFyf133tpZQJa-s96p0tgnraQ&libraries=places&ver=5.4.6:81 Google Maps JavaScript API error: InvalidKeyMapError
    https://developers.google.com/maps/documentation/javascript/error-messages#invalid-key-map-error

    The map is showing on the edit page but when I view it on the frontend it doesn't show. Here it is:
    https://markuphero.com/share/DkRdkfhqKPlLMItgKVF2

    In the edit page, it is showing:
    https://markuphero.com/share/E2x21FYDQ53GI43lzUzU

Viewing 10 replies - 1 through 10 (of 16 total)
  • Author
    Replies
  • #30758
    Long Nguyen
    Moderator

    Hi Kirb,

    Please use the helper function in View to render the map with your API key instead of using the Insert Fields section.

    {{ mb.rwmb_meta( 'google_map' ) }}

    Refer to this topic https://metabox.io/support/topic/google-maps-not-reading-api-key-from-meta-box-builder/

    #30764
    Kirb
    Participant

    Thanks Long!

    How can I do that? I tried adding that but it doesn't work on my end. I'm adding this on MB Views as a shortcode containing this:

    {{ post.project_address.project_google_map.rendered }}

    #30775
    Long Nguyen
    Moderator

    Hi Kirb,

    The map field is a sub-field in a group, isn't it? You can follow this topic to know how to render map field in a group with PHP code https://metabox.io/support/topic/google-maps-using-default-api-key-mb-settings-page-with-meta-box-groups/

    #30831
    Kirb
    Participant

    I tried it but still doesn't work. Maybe because I'm using Divi with a default google API field?

    $group_values = rwmb_meta( 'project_address_group' );
    $args = array(
        'api_key' => 'AIzaSyCxo8eTReDw2Ehp9zYovWw49sVRwEsD8Cs'
    );

    My custom field

    <?php
    add_filter( 'rwmb_meta_boxes', 'your_prefix_function_name' );
    
    function your_prefix_function_name( $meta_boxes ) {
        $prefix = '';
    
        $meta_boxes[] = [
            'title'      => __( 'Project Details', 'your-text-domain' ),
            'id'         => 'project-details',
            'post_types' => ['project'],
            'geo'        => [
                'API_KEY' => 'AIzaSyCxo8eTReDw2Ehp9zYovWw49sVRwEsD8Cs',
            ],
            'fields'     => [
                [
                    'name'              => __( 'Project Documents', 'your-text-domain' ),
                    'id'                => $prefix . 'upload_documents',
                    'type'              => 'group',
                    'collapsible'       => true,
                    'save_state'        => true,
                    'group_title'       => 'Document',
                    'clone'             => true,
                    'clone_as_multiple' => true,
                    'add_button'        => __( 'Upload more', 'your-text-domain' ),
                    'fields'            => [
                        [
                            'name'             => __( 'Add Document', 'your-text-domain' ),
                            'id'               => $prefix . 'project_documents',
                            'type'             => 'file_advanced',
                            'max_file_uploads' => 1,
                        ],
                        [
                            'name' => __( 'Add Thumbnail Icon', 'your-text-domain' ),
                            'id'   => $prefix . 'document_icon',
                            'type' => 'single_image',
                        ],
                    ],
                ],
                [
                    'name'   => __( 'Project Address', 'your-text-domain' ),
                    'id'     => $prefix . 'project_address',
                    'type'   => 'group',
                    'fields' => [
                        [
                            'name' => __( 'Address', 'your-text-domain' ),
                            'id'   => $prefix . 'address_field',
                            'type' => 'text',
                        ],
                        [
                            'name'          => __( 'Location', 'your-text-domain' ),
                            'id'            => $prefix . 'project_google_map',
                            'type'          => 'map',
                            'std'           => '9.025299452651655, 125.2054629738509',
                            'address_field' => 'address_field',
                            'language'      => 'iw',
                            'region'        => 'il',
                        ],
                    ],
                ],
            ],
        ];
    
        return $meta_boxes;
    }
    #30839
    Long Nguyen
    Moderator

    Hi,

    Your group has the ID project_address, not project_address_group. If you want to use the PHP language to show the map, please try to use this code

    $group_values = rwmb_meta( 'project_address' );
    $args = array(
        'api_key' => 'AIzaSyCxo8eTReDw2Ehp9zYovWw49sVRwEsD8Cs'
    );
    
    echo RWMB_Map_Field::render_map( $group_value['project_google_map'], $args );

    Refer to this topic
    https://metabox.io/support/topic/google-maps-using-default-api-key-mb-settings-page-with-meta-box-groups/

    And the setting api_key in the meta box settings should be in lowercase.

            'geo'        => [
                'api_key' => 'AIzaSyCxo8eTReDw2Ehp9zYovWw49sVRwEsD8Cs',
            ],
    #30848
    Kirb
    Participant

    I tried to add this in the functions.php but still doesn't load the map.

    $group_values = rwmb_meta( 'project_address' );
    $args = array(
        'api_key' => 'AIzaSyCxo8eTReDw2Ehp9zYovWw4W9VRwEsD8Cs'
    );
    
    echo RWMB_Map_Field::render_map( $group_value['project_google_map'], $args );

    And the setting api_key in the meta box settings is already in lowercase.

    #30854
    Long Nguyen
    Moderator

    Hi Kirb,

    You need to add the code to the template file of the theme such as single.php or template-parts/content.php to output the field value. Please read more here https://docs.metabox.io/displaying-fields/#using-code

    #30859
    Kirb
    Participant

    Thanks. Is there a way to convert this into views? Instead of PHP so it is much easier for me to add this to the single.php.

    $group_values = rwmb_meta( 'project_address' );
    $args = array(
        'api_key' => 'AIzaSyCxo8eTReDw2Ehp9zYovWw4W9VRwEsD8Cs'
    );
    
    echo RWMB_Map_Field::render_map( $group_value['project_google_map'], $args );
    #30864
    Long Nguyen
    Moderator

    Hi,

    It is not possible to call the class and static PHP functions in the View via the proxy so you can wrap the code in a function, add it to the file functions.php then call this function in the View via proxy mb.

    For example:

    function my_map() {
        $group_values = rwmb_meta( 'project_address' );
        $args = array(
            'api_key' => 'AIzaSyCxo8eTReDw2Ehp9zYovWw49sVRwEsD8Cs'
        );
        echo RWMB_Map_Field::render_map( $group_values['project_google_map'], $args );
    }

    Call in View: {{ mb.my_map() }}

    Please read more on the documentation
    https://docs.metabox.io/extensions/mb-views/#running-php-functions

    #30880
    Kirb
    Participant

    Hi, Long. Thanks for your patient. I did everything you said above but everything is not working maybe the Metabox plugin will cause conflict in Divi especially when adding a map. Maybe this google map loads twice. Any other suggestions? Thanks

Viewing 10 replies - 1 through 10 (of 16 total)
  • You must be logged in to reply to this topic.