Invalid key map error

Support MB Views Invalid key map errorResolved

Viewing 15 posts - 1 through 15 (of 17 total)
  • Author
    Posts
  • #30741
    JamesJames
    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

    #30758
    Long NguyenLong 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://support.metabox.io/topic/google-maps-not-reading-api-key-from-meta-box-builder/

    #30764
    JamesJames
    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 NguyenLong 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://support.metabox.io/topic/google-maps-using-default-api-key-mb-settings-page-with-meta-box-groups/

    #30831
    JamesJames
    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 NguyenLong 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://support.metabox.io/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
    JamesJames
    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 NguyenLong 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
    JamesJames
    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 NguyenLong 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
    JamesJames
    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

    #30890
    Long NguyenLong Nguyen
    Moderator

    Hi,

    You can try to follow the Debugging Information step to troubleshoot the issue https://support.metabox.io/topic/how-to-create-a-new-topic/

    If it still does not work, I think you can use the Google Map as a top field instead of a subfield in a group.

    #30939
    JamesJames
    Participant

    I already enabled the wp debug and set it to true in wp-config.php but there are no hints or errors showing. I also remove it from the group field and make it as the top field and still doesn't load the map on the frontend.

    #30941
    JamesJames
    Participant

    Here's the curre6nt ma6 fields

    <?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' => 'AIzaSyCxo8eTReDw2Ehp9zYovtWw4W9VRwEsD8Cs',
            ],
            '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'          => __( 'Map', 'your-text-domain' ),
                    'id'            => $prefix . 'map_b5umjtee1s7',
                    'type'          => 'map',
                    'api_key'       => 'AIzaSyCxo8eTReDw2Ehp9zYovWw4W9VRwEsD8Cs',
                    'std'           => '9.025299452651655, 125.2054629738509',
                    'address_field' => 'address_name',
                    'region'        => 'il',
                ],
                [
                    'name' => __( 'Address Name', 'your-text-domain' ),
                    'id'   => $prefix . 'address_name',
                    'type' => 'text',
                ],
            ],
        ];
    
        return $meta_boxes;
    }
    #30945
    Long NguyenLong Nguyen
    Moderator

    Hi,

    Please open the Console tab in the Inspect tool of the browser to check if there is a JavaScript error message like your first post. It is possible that there is a problem with your API key.

Viewing 15 posts - 1 through 15 (of 17 total)
  • You must be logged in to reply to this topic.