Invalid key map error
- This topic has 16 replies, 2 voices, and was last updated 3 years, 6 months ago by
Long Nguyen.
-
AuthorPosts
-
September 14, 2021 at 3:30 AM #30741
James
ParticipantHi, 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/DkRdkfhqKPlLMItgKVF2In the edit page, it is showing:
https://markuphero.com/share/E2x21FYDQ53GI43lzUzUSeptember 14, 2021 at 9:48 PM #30758Long Nguyen
ModeratorHi 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/
September 14, 2021 at 11:31 PM #30764James
ParticipantThanks 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 }}
September 15, 2021 at 11:29 AM #30775Long Nguyen
ModeratorHi 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/September 20, 2021 at 4:26 AM #30831James
ParticipantI 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; }
September 20, 2021 at 2:48 PM #30839Long Nguyen
ModeratorHi,
Your group has the ID
project_address
, notproject_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', ],
September 20, 2021 at 7:52 PM #30848James
ParticipantI 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.September 20, 2021 at 9:50 PM #30854Long Nguyen
ModeratorHi Kirb,
You need to add the code to the template file of the theme such as
single.php
ortemplate-parts/content.php
to output the field value. Please read more here https://docs.metabox.io/displaying-fields/#using-codeSeptember 21, 2021 at 4:41 AM #30859James
ParticipantThanks. 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 );
September 21, 2021 at 12:39 PM #30864Long Nguyen
ModeratorHi,
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-functionsSeptember 21, 2021 at 11:23 PM #30880James
ParticipantHi, 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
September 22, 2021 at 10:52 AM #30890Long Nguyen
ModeratorHi,
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.
September 25, 2021 at 12:05 AM #30939James
ParticipantI 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.
September 25, 2021 at 2:21 AM #30941James
ParticipantHere'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; }
September 25, 2021 at 3:33 PM #30945Long Nguyen
ModeratorHi,
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.
-
AuthorPosts
- You must be logged in to reply to this topic.