Support Forum
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
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/
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 }}
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/
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;
}
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',
],
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.
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
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 );
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
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
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.
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.
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;
}
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.