WordPress.org

Ready to get started?Download WordPress

Forums

Pronamic Google Maps
[resolved] [closed] Display Pronamic meta box in a Front end page (13 posts)

  1. J Grandin
    Member
    Posted 2 years ago #

    Hi and thank you a lot developers for this fantastic plugin.

    I'm currently designing a website where everyone can create an account, then create their own posts (a custom one) using custom taxonomies and custom fields, including geolocation, thanks to pronamic plugin. Also the front page of the website displays a big mashup map to access the approved posts. I make a great use of Pronamic plugin in this website that is still in development, so thank you again.

    The pronamic metabox is displayed in a front page where users can edit or add their own posts. To do so I use the very good plugin WP User Frontend.

    My problem is that I don't know which scripts and styles have to be enqueued in functions.php to allow pronamic meta box attributes and functions to be activated, especially in a front page. I would like to activate geocode/reverse geocode functions, and also the location result in the google map of the metabox. I searched in the plugin files, but it's really complex.

    Here are the functions I currently use to call pronamic scripts and styles:

    /**
     * Add pronamic google maps scripts in front user interface
     */
    
    add_action('wp_enqueue_styles', 'enqueue_frontuser_styles');
    add_action('wp_enqueue_scripts', 'enqueue_frontuser_scripts');
    
    function enqueue_frontuser_styles(){
        wp_enqueue_style('pronamic-google-maps-admin', 'http://www.mywebsite.com/wp-content/plugins/pronamic-google-maps/css/admin.css');
        }
    }
    
    function enqueue_frontuser_scripts() {
        wp_register_script('pronamic-google-maps-admin' , 'http://www.mywebsite.com/wp-content/plugins/pronamic-google-maps/js/admin.js' , array('jquery', 'google-jsapi') );
        }
    }

    Unfortunately I can not publicly release the address of the website but I can PM it.

    Thanks for all your help!

    http://wordpress.org/extend/plugins/pronamic-google-maps/

  2. Remco Tolsma
    Member
    Plugin Author

    Posted 2 years ago #

    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!

  3. J Grandin
    Member
    Posted 1 year ago #

    Thank you very much Remco! I will test it to figure out.

  4. J Grandin
    Member
    Posted 1 year ago #

    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.

  5. carpintomen
    Member
    Posted 1 year ago #

    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.

  6. J Grandin
    Member
    Posted 1 year ago #

    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>.

  7. carpintomen
    Member
    Posted 1 year ago #

    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.

  8. J Grandin
    Member
    Posted 1 year ago #

    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. :)

  9. carpintomen
    Member
    Posted 1 year ago #

    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

  10. carpintomen
    Member
    Posted 1 year ago #

    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

  11. J Grandin
    Member
    Posted 1 year ago #

    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.

  12. Stevie D
    Member
    Posted 1 year ago #

    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?

  13. Avi_Lambert
    Member
    Posted 1 year ago #

    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.

Topic Closed

This topic has been closed to new replies.

About this Plugin

About this Topic