I’m not sure if it’s an good idea to use the admin meta box on the frontend. You probably also need the following scripts: https://github.com/pronamic/wp-pronamic-google-maps/blob/2.2.3/classes/Pronamic_Google_Maps.php#L178. I hope you figure it out, good luck!
Thank you very much Remco! I will test it to figure out.
Ok I figure how to allow Pronamic Google Maps metabox to be functional in a front end form. WP nonce security check is working for me since users have to log in with a contributor account to access the form.
Here is the code I used if for some reason somebody wants to do the same thing (using WP User Frontend function).
//////// PRONAMIC GOOGLE MAPS IN FRONT END //////////
/**
* Add google maps options to the add custom post area<br />
*
* @uses wpuf_add_post_form_description action hook
*
* @param string $post_type the post type of the post add screen
* @param object|null $post the post object
*/
function wpufe_gmaps( $post_type, $post = null) {
// Pronamic custom function to get custom fields
//$pgm = ( $post != null ) ? pronamic_get_google_maps_meta() : '' ;
//print_r(pronamic_get_google_maps_meta());
$pgm_map_type = ( $post != null ) ? get_post_meta( $post->ID, '_pronamic_google_maps_map_type', true ) : '';
$pgm_zoom = ( $post != null ) ? get_post_meta( $post->ID, '_pronamic_google_maps_zoom', true ) : '';
$pgm_address = ( $post != null ) ? get_post_meta( $post->ID, '_pronamic_google_maps_address', true ) : '';
$pgm_latitude = ( $post != null ) ? get_post_meta( $post->ID, '_pronamic_google_maps_latitude', true ) : '';
$pgm_longitude = ( $post != null ) ? get_post_meta( $post->ID, '_pronamic_google_maps_longitude', true ) : '';
wp_nonce_field('save-post', Pronamic_Google_Maps::NONCE_NAME);
?>
<div id="pronamic-google-maps-meta-box" >
<li>
<input id="pgm-map-type-field" name="<?php echo Pronamic_Google_Maps_Post::META_KEY_MAP_TYPE; ?>" value="<?php echo esc_attr( $pgm_map_type ); ?>" type="hidden" />
<input id="pgm-zoom-field" name="<?php echo Pronamic_Google_Maps_Post::META_KEY_ZOOM; ?>" value="<?php echo esc_attr( $pgm_zoom ); ?>" type="hidden" />
<input id="pgm-active-field" name="<?php echo Pronamic_Google_Maps_Post::META_KEY_ACTIVE; ?>" value="true" type="hidden" />
<label for="pgm-address-field">Address</label>
<textarea id="pgm-address-field" name="<?php echo Pronamic_Google_Maps_Post::META_KEY_ADDRESS; ?>" rows="2" cols="40"><?php echo esc_attr( $pgm_address ); ?></textarea>
<p class="description">Please type the address and click on "Geocode ↓" to find the location.</p>
</li>
<li>
<input id="pgm-geocode-button" type="button" value="<?php _e('Geocode ↓', 'pronamic_google_maps'); ?>" class="button" name="pgm_geocode" />
<input id="pgm-reverse-geocode-button" type="button" value="<?php echo _e('Reverse Geocode ↑', 'pronamic_google_maps'); ?>" class="button" name="pgm_reverse_geocode" />
</li>
<li>
<label for="pgm-lat-field">Latitude</label>
<input id="pgm-lat-field" name="<?php echo Pronamic_Google_Maps_Post::META_KEY_LATITUDE; ?>" value="<?php echo esc_attr($pgm_latitude); ?>" type="text" style="width: 200px;" />
°
</li>
<li>
<label for="pgm-lng-field">Longitude</label>
<input id="pgm-lng-field" name="<?php echo Pronamic_Google_Maps_Post::META_KEY_LONGITUDE; ?>" value="<?php echo esc_attr($pgm_longitude); ?>" type="text" style="width: 200px;" />
°
</li>
<li>
<label for="pgm-canvas">Location result</label>
<div id="pgm-canvas" style="width: 600px; height: 350px; margin-left: 140px; border: 1px solid white;"></div>
<p class="description">Tip: Change the zoom level and map type to your own wishes.</p>
</li>
</div>
<?php
}
add_action( 'wpuf_add_post_form_tags', 'wpufe_gmaps', 10, 2 );
Notes:
– For a reason I can’t figure out, the function pronamic_get_google_maps_meta()
didn’t worked so I needed to get the custom fields data using classic WP function get_post_meta;
– Since in front end you don’t use metaboxes, I forgot first to put the form between <div id="pronamic-google-maps-meta-box" ></div>
tags. This is important because the admin.js script will only work for this element id.
– Of course you have to update the custom fields with another function using update_post_meta()
for the pronamic custom fields. i.e.
update_post_meta( $post_id, '_pronamic_google_maps_map_type', $_POST['_pronamic_google_maps_map_type'] );
– I would like the posts to have the ggmap active by default, so active custom field is set “true” by default and hidden
Thanks a lot Remco for such a very good plugin.
Hi!
I’m trying to put pronamic google maps in my wp user frontend form for allow users to mark geo positions. but i don’t know how.
I see your code but, can you explain step by step how to achieve it?
where i have to paste this code? I’m Lost.
Thank you very much.
Hi,
1. Input the code above in your theme’s functions.php file. The pronamic google maps form will be implemented into your WP User Frontend form.
2. Input also the following code (in functions.php, below the above code). These functions are used to validate and save the data you input in the form:
/**
* Validate existence of the address after post creation/edit
*
* @uses 'wpuf_add_post_validation' filter
*
* @param array $errors errors array
* @return array errors array
*/
function wpufe_address_validation( $errors ) {
if( $_POST['_pronamic_google_maps_address'] == '' ) {
$errors[] = 'Please choose a geolocalized address for your post';
}
return $errors;
}
add_filter( 'wpuf_add_post_validation', 'wpufe_address_validation' );
add_filter( 'wpuf_edit_post_validation', 'wpufe_address_validation' );
/**
* Add the gg maps data after new post creation
*
* @uses <code>wpuf_add_post_after_insert</code> action hook
*
* @param int $post_id the newly created post id
*/
function wpufe_add_anecdote_gmaps( $post_id ) {
update_post_meta( $post_id, '_pronamic_google_maps_map_type', $_POST['_pronamic_google_maps_map_type'] );
update_post_meta( $post_id, '_pronamic_google_maps_zoom', $_POST['_pronamic_google_maps_zoom'] );
update_post_meta( $post_id, '_pronamic_google_maps_active', $_POST['_pronamic_google_maps_active'] );
update_post_meta( $post_id, '_pronamic_google_maps_address', $_POST['_pronamic_google_maps_address'] );
update_post_meta( $post_id, '_pronamic_google_maps_latitude', $_POST['_pronamic_google_maps_latitude'] );
update_post_meta( $post_id, '_pronamic_google_maps_longitude', $_POST['_pronamic_google_maps_longitude'] );
}
add_action( 'wpuf_add_post_after_insert', 'wpufe_add_anecdote_gmaps' );
add_action( 'wpuf_edit_post_after_update', 'wpufe_add_anecdote_gmaps' );
3. Finally in your header.php file, include the Pronamic Google Maps’ admin.js that will make your embed Google Maps active in the form. This JS file will activate the map included inside the following div: <div id="pronamic-google-maps-meta-box" ></div>
.
Thank you very much for your reply!
I followed your steps and I get the following error message:
Fatal error: Class ‘Pronamic_Google_Maps’ not found in /homepages/32/f35589875244/htdocs/my-site/wp-content/themes/ipin/functions.php on line 436
– – – –
line 436:
wp_nonce_field(‘save-post’, Pronamic_Google_Maps::NONCE_NAME);
– – – –
any suggestions? the map is not drawn on the form.
Oh, you’re right!
Remco (the plugin’s author) has updated the plugin recently and changed some of the php classes’ names.
Find this line:
wp_nonce_field('save-post', Pronamic_Google_Maps::NONCE_NAME);
and replace it by:
wp_nonce_field('save-post', Pronamic_Google_Maps_Maps::NONCE_NAME);
This should fix your problem. 🙂
Thanks again
Well, the problem is resolved, the form´s fields from pronamic google maps is showing but the map’s box is not shown.
I added the admin.js in header.php and nothing.
any suggestions?
Your help is greatly appreciated
WORKS!!!
I add this lines in header.php and works ok!
<script type=’text/javascript’ src=’http://www.google.com/jsapi?ver=3.5′></script>
<script type=’text/javascript’ src=’http://site URL/wp-content/plugins/pronamic-google-maps/js/admin.js?ver=3.5′></script>
You are a King!
Thank you very much J Grandin.
regards
Ok, I didn’t worked on this since half a year, so I’m a little bit confused I think. Thank you for your patience and sorry if you had to insist 🙂
Here is the complete list of files you need to upload in your header:
<link type="text/css" href="http://www.shareyouranecdote.com/wp-content/plugins/pronamic-google-maps/css/admin.css" rel="stylesheet" />
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="http://www.shareyouranecdote.com/wp-content/plugins/pronamic-google-maps/js/markerclustererplus.js"></script>
<script type="text/javascript" src="http://www.shareyouranecdote.com/wp-content/plugins/pronamic-google-maps/js/markermanager.js"></script>
<script type="text/javascript" src="http://www.shareyouranecdote.com/wp-content/plugins/pronamic-google-maps/js/admin.js"></script>
Please be sure that jquery is also included.
cool, this is great thanks guys, i might now use wp user front end
I’m just wondering as i use gravity forms at the moment for submitting data, im sure there must be a way to do the above using gravity forms?
I’m looking to create a front end geocoding option on a platform I’m developing. I may just be using this great piece of code. Thanks @JGrandin and @Carpitomen.