PLEASE NOTE: These forums are no longer utilized and are provided as an archive for informational purposes only. All support issues will be handled via email using our support ticket system. For more detailed information on this change, please see this blog post.

My WP Geo mashup

  1. I want to share my dev on a mashup with "WP Geo" plugin.
    http://wordpress.org/extend/plugins/wp-geo/screenshots/

    WP Geo allows to set a physical location for a post, fills 2 custom fields with latitude and longitude.

    I needed to show a map, move a marker, fill latitude & longitude fields, in a GravityForms form.

    A screenshot of my form : http://dl.dropbox.com/u/15052756/cap-255.png

    Here how to do that :
    1/ Add a GF field "Section break" and edit the CSS class option with "wpgeo"
    2/ Add a GF field "custom field" and edit the custom field name with _wp_geo_latitude
    3/ Add a GF field "custom field" and edit the custom field name with _wp_geo_longitude
    4/ Install "WP Geo" plugin http://wordpress.org/extend/plugins/wp-geo/
    5/ Put the custom code in your functions.php

    add_filter("gform_pre_render", "gravityforms_wpgeo_mashup");
    function gravityforms_wpgeo_mashup($form) {
    
        //REPLACE 1 with your actual form id
        $my_geo_form = 1;
        if($form["id"] !=$my_geo_form)
            return;
    
        // find IDs of latitude&longitude custom fields
        foreach($form["fields"] as &$field){
                if($field["postCustomFieldName"]=="_wp_geo_longitude") $field_lng = $field["id"];
                if($field["postCustomFieldName"]=="_wp_geo_latitude") $field_lat = $field["id"];
                //print_r($field);
        }
    
        // show map only if latitude&longitude custom fields exist
        if($field_lng && $field_lat ) :
            // load "WP Geo" plugin
            require_once( WP_PLUGIN_DIR . '/wp-geo/wp-geo.php' );
            global $wpgeo;
            $wpgeo = new WPGeo();
            $zoom = 2;
            $map = $wpgeo->mapScriptsInit( 20, 0,$zoom, true, false );
            $map .='
                <input type="hidden" name="wpgeo_map_settings_zoom" id="wpgeo_map_settings_zoom" value="" />
                <input type="hidden" name="wpgeo_map_settings_type" id="wpgeo_map_settings_type" value="" />
                <input type="hidden" name="wpgeo_map_settings_centre" id="wpgeo_map_settings_centre" value="" />
                <input name="wp_geo_latitude" type="hidden" size="25" id="wp_geo_latitude" value="" />
                <input name="wp_geo_longitude" type="hidden" size="25" id="wp_geo_longitude" value="" />
                <script type="text/javascript">
                    <!--
                    jQuery(document).ready(function() {';
    
                        $map .='var my_geo_form= '.$my_geo_form.';';
                        $map .='var field_lng= '.$field_lng.';';
                        $map .='var field_lat= '.$field_lat.';';
                        $map .='
                        jQuery("#wp_geo_map").click(function(e) {
    
                            jQuery("#input_"+my_geo_form+"_"+field_lat).val(jQuery("#wp_geo_latitude").val());
                            jQuery("#input_"+my_geo_form+"_"+field_lng).val(jQuery("#wp_geo_longitude").val());
    
                        });
    
                    });
                -->
                </script>
                <div id="wp_geo_map" style="width:auto; height:400px"></div>';
    
            // find ID of section with cssClass "wpgeo" and put the map into description
            foreach($form["fields"] as &$field){
                    if($field["cssClass"]=="wpgeo")$field["description"].=$map;
            }
        endif;
        return $form;
    }

    6/ Edit the ID of your form, in the code

    That's all !

    Posted 9 years ago on Tuesday January 4, 2011 | Permalink
  2. Thanks for sharing! :)

    Posted 9 years ago on Tuesday January 4, 2011 | Permalink
  3. RichardBest
    Member

    Cool. Thanks!

    Posted 9 years ago on Wednesday January 19, 2011 | Permalink
  4. This is really, really cool. Thank you. I noted though that the necessary scripts to make the map work are not loading. I accomplished this by basically grabbing the necessary code from WP Geo and sticking it in a function. There might be some unnecessary scripts being loaded though.

    /**
     * Make sure the required scripts are loaded for WP Geo. Code from WP Geo plugin, author: Ben Huson <ben@thewhiteroom.net>
    *
    * Change 'gform_enqueue_scripts_1' to reflect the correct form ID or just use 'gform_enqueue_scripts' to load on all forms.
     */
    add_action( 'gform_enqueue_scripts_1', 'dwd_gravityforms_wpgeo_scripts', 2 );
    function dwd_gravityforms_wpgeo_scripts( $form, $ajax ) {
    	global $wpgeo;
    
    	// Set Locale
    	$locale = $wpgeo->get_googlemaps_locale('&hl=');
    
    	wp_register_script('googlemaps', 'http://maps.google.com/maps?file=api&v=2' . $locale . '&key=' . $wpgeo->get_google_api_key() . '&sensor=false', false, '2');
    	wp_register_script('wpgeo', WP_CONTENT_URL . '/plugins/wp-geo/js/wp-geo.js', array('googlemaps', 'wpgeotooltip'), '1.0');
    	wp_register_script('wpgeo-admin-post', WP_CONTENT_URL . '/plugins/wp-geo/js/admin-post.js', array('jquery', 'googlemaps'), '1.0');
    	wp_register_script('wpgeotooltip', WP_CONTENT_URL . '/plugins/wp-geo/js/tooltip.js', array('googlemaps', 'jquery'), '1.0');
    	//wp_register_script('jquerywpgeo', WP_CONTENT_URL . '/plugins/wp-geo/js/jquery.wp-geo.js', array('jquery', 'googlemaps'), '1.0');
    
    	wp_enqueue_script('jquery');
    	wp_enqueue_script('googlemaps');
    	wp_enqueue_script('wpgeo');
    	wp_enqueue_script('wpgeotooltip');
    }
    Posted 8 years ago on Wednesday June 8, 2011 | Permalink
  5. I load WP-Geo scripts with line 19 of my script :
    require_once( WP_PLUGIN_DIR . '/wp-geo/wp-geo.php' );

    This way, we stay compatible with WP-Geo future developments.

    Posted 8 years ago on Wednesday June 8, 2011 | Permalink
  6. Hello,

    I tried this out but I'm getting an error when I put this in my functions.php file. It says that "add_filter("gform_pre_render", "gravityforms_wpgeo_mashup")" is an undefined function. Where should I be putting this code? Under includes/functions.php or somewhere else?

    Thanks!

    Casey

    Posted 8 years ago on Tuesday June 21, 2011 | Permalink
  7. Hey Casey,

    functions.php is actually the file in your theme folder : wp-content/themes/YOURTHEME/functions.php, and is not the wp-includes/functions.php

    This should fix your problem.

    Nico

    Posted 8 years ago on Tuesday June 21, 2011 | Permalink
  8. Nico,

    I'm using Thesis theme so I'm not sure if that matters. I pasted the code into my custom_functions.php file. However, the map does not display. I added the section break with CSS class wpgeo, custom fields, and changed the id of the form. You can see my form here:

    http://pcsreports.com/google-maps/

    Thanks for helping me!

    Thanks,
    Casey

    Posted 8 years ago on Tuesday June 21, 2011 | Permalink
  9. On line 17 of my script, I test if $field_lng & $field_lat are defined.

    Could you double check if you added the "Custom field name" values ? like "_wp_geo_latitude"
    Maybe you mixed the 2 fields : "Field label" and "Custom field name".
    And don't forget to check the radio button "New" just above the "Custom field name".

    And in the "Field label", you can simply put the value "Latitude".

    You see ?

    Posted 8 years ago on Tuesday June 21, 2011 | Permalink
  10. All,

    I figured out my problem! I put _wp_geo_latitude as the form label but not as a new custom field. Once I did that everything worked!

    Casey

    Posted 8 years ago on Friday June 24, 2011 | Permalink
  11. Hello,

    I have one more question for you. Do you know a way to set the starting location using a city and state? For instance, I want the user to select the post category in the form State > City, then start the map zoomed in on that location.

    Is there some code within wpgeo that does this function?

    Thanks,
    Casey

    Posted 8 years ago on Friday June 24, 2011 | Permalink
  12. Hello Casey

    "select the post category in the form State > City, then start the map zoomed in on that location. "

    Well, you will need to create some javascript functions to do so.
    Pre-calculate lat/lng for every category, then center the map with some Google Maps API v2 javascript. This can be tricky.

    I don't think WPGeo will help for that.

    Posted 8 years ago on Friday June 24, 2011 | Permalink
  13. shorn
    Member

    HI there,

    This looks really interesting and is something that I have wanted to implement for a while now (provided I have the right understanding of what you are saying the functionality is.)

    Am I right in thinking that if I follow this posts instructions, I can add a google map to my form and let the user set the location?

    If so then that is great. I am in the process of creating a directory site, and I want users to submit entries to me, and would love a way to pinpoint their entry with a google map.

    Am I thinking this is along those lines? (Your form screenshot in the first post is not showing)

    Thanks!

    Posted 8 years ago on Friday June 24, 2011 | Permalink
  14. Hello,

    I think there is a minor error in the code. The main function was keeping my other gravity forms from working, and I narrowed down the problem to this code:

    if($form["id"] !=$my_geo_form)
    return;

    Return by itself gives back a value of "null". So I added return $form and all my forms stared working again.

    if($form["id"] !=$my_geo_form)
    return $form;

    Casey

    Posted 8 years ago on Saturday June 25, 2011 | Permalink
  15. All,

    One thing I did is hide the lat/long fields from displaying on the form, as they're not really needed. To do this, find your field numbers by viewing the source code for your form. Then put this in your CSS file:

    body .gform_wrapper .gform_body .gform_fields #field_4_3.gfield, #field_4_2.gfield {display:none}

    Replace 4_2 and 4_3 with your field IDs.

    Casey

    Posted 8 years ago on Saturday June 25, 2011 | Permalink
  16. @Shorn

    Yes artificialowl has this working great. I'm using it on my site (still in draft form) to do the same thing as you.

    http://pcsreports.com/google-maps

    Entering that form saves coordinates into a post as custom fields. With wpgeo installed, it looks like this on the admin login when editing the post:

    http://i.imgur.com/qbwKY.jpg

    You can then change the coords yourself or make edits. Using wpgeo you can display multiple posts on a map. I haven't done that part yet.

    Note: As stated above I've hidden the lat/long form fields to simplify the user interface.

    Posted 8 years ago on Saturday June 25, 2011 | Permalink
  17. shorn
    Member

    Well thats brillant! Really helps me to achieve what I want to do! I've been looking for this functionality for (literally) years, and I'm rather excited about getting to implement it! Thank for the reply.

    Posted 8 years ago on Saturday June 25, 2011 | Permalink
  18. Sorry my screenshot was offline, here is a new one : http://dl.dropbox.com/u/15052756/screenshots/wpgeo-gravityform.jpg

    @shorn, with my code, users cannot enter an adress. Only moved a pinpoint on the map (or double click on the map).

    Maybe danielck's code makes it work.

    Posted 8 years ago on Monday June 27, 2011 | Permalink
  19. drunkenmugsy
    Member

    This is great! Almost exactly what I was looking for. Any luck on getting a street address to submit the same way? I would like to convert it to a street address or be able to input a street address initially. Looks like it may be difficult to do that with this implementation. I would like to use parts of the address like the state as a category and not rely on the user to input it.

    Posted 8 years ago on Monday July 4, 2011 | Permalink
  20. All,

    I got three things working over the past few days with Gravity Forms:

    1) Dynamic dropdown (looks dynamic, actually filters out extra categories)
    2) Move map based on dropdown
    3) Move map based on search

    You can check it out here: http://pcsreports.com/survey-single

    I will post some code later but let me know what you think. I learned a LOT of jquery to get this working... plus a lot of help from the folks on stackexchange.com (they rock!).

    Edit:

    Here's the code that filters the dropdown and changes the map based on the selected options: http://pastebin.com/zhACadFU

    As for the search box above the map, I just added an input and button above the map by inserting it into artificialowl's code:

    <div id="map_search_div"><input name="map_search" type="text" id="map_search" /><input type="button" id="map_search_button" class="map_search_button" name="map_search_button" value="search" /></div>
    <div id="wp_geo_map" style="width:auto; height:400px"></div>';

    Casey

    Posted 8 years ago on Thursday July 7, 2011 | Permalink
  21. shorn
    Member

    Looks really good. I will hopefully be implementing some of this over the next few days! I think this thread will be a lot of help!

    Posted 8 years ago on Thursday July 7, 2011 | Permalink
  22. shorn
    Member

    OK, just set about my first bash at this. Nothing showing up. I have the section break with css class set, and the custom fields with correct names. My two field IDs are 4_14 and 4_15. Is that how I need to write the ID?

    Posted 8 years ago on Friday July 8, 2011 | Permalink
  23. @casey :

    What a sweet piece of code ! Perfect.
    Now you need to find a way to disable form submission when entering an address :)

    Here is my try :

    jQuery('#gform_6').submit(function() {
    // check if address field is empty or not
       if(jQuery("#map_search").val("")=="") // empty
          return true; // ok submit form
       else { // address filled
          jQuery("#map_search").val(""); // empty the field
          return false; // do not submit form
          }
    });

    This code empties the address field after submiting an address

    Posted 8 years ago on Friday July 8, 2011 | Permalink
  24. @artificialowl Thanks! Yes fixing the form submit when searching is on my to do list. I was looking at detecting when the search form was onBlur and the user pressed enter at the same time. But I think your code will work great. I'll give it a shot.

    Posted 8 years ago on Saturday July 9, 2011 | Permalink
  25. shorn
    Member

    OK, still not able to get this showing! Form is all setup in the dashboard, heres what Ive added to my functions.php file.

    /* Code for Maps Integration */
    
    add_filter("gform_pre_render", "gravityforms_wpgeo_mashup");
    function gravityforms_wpgeo_mashup($form) {
    
        //REPLACE 1 with your actual form id
        $my_geo_form = 4;
        if($form["id"] !=$my_geo_form)
    return $form;
    
        // find IDs of latitude&longitude custom fields
        foreach($form["fields"] as &$field){
                if($field["postCustomFieldName"]=="_wp_geo_longitude") $field_lng = $field["4_15"];
                if($field["postCustomFieldName"]=="_wp_geo_latitude") $field_lat = $field["4_14"];
                //print_r($field);
        }
    
        // show map only if latitude&longitude custom fields exist
        if($field_lng && $field_lat ) :
            // load "WP Geo" plugin
            require_once( WP_PLUGIN_DIR . '/wp-geo/wp-geo.php' );
            global $wpgeo;
            $wpgeo = new WPGeo();
            $zoom = 2;
            $map = $wpgeo->mapScriptsInit( 20, 0,$zoom, true, false );
            $map .='
                <input type="hidden" name="wpgeo_map_settings_zoom" id="wpgeo_map_settings_zoom" value="" />
                <input type="hidden" name="wpgeo_map_settings_type" id="wpgeo_map_settings_type" value="" />
                <input type="hidden" name="wpgeo_map_settings_centre" id="wpgeo_map_settings_centre" value="" />
                <input name="wp_geo_latitude" type="hidden" size="25" id="wp_geo_latitude" value="" />
                <input name="wp_geo_longitude" type="hidden" size="25" id="wp_geo_longitude" value="" />
                <script type="text/javascript">
                    <!--
                    jQuery(document).ready(function() {';
    
                        $map .='var my_geo_form= '.$my_geo_form.';';
                        $map .='var field_lng= '.$field_lng.';';
                        $map .='var field_lat= '.$field_lat.';';
                        $map .='
                        jQuery("#wp_geo_map").click(function(e) {
    
                            jQuery("#input_"+my_geo_form+"_"+field_lat).val(jQuery("#wp_geo_latitude").val());
                            jQuery("#input_"+my_geo_form+"_"+field_lng).val(jQuery("#wp_geo_longitude").val());
    
                        });
    
                    });
                -->
                </script>
                <div id="wp_geo_map" style="width:auto; height:400px"></div>';
    
            // find ID of section with cssClass "wpgeo" and put the map into description
            foreach($form["fields"] as &$field){
                    if($field["cssClass"]=="wpgeo")$field["description"].=$map;
            }
        endif;
        return $form;
    }

    Can anyone see where i'm going wrong??

    Posted 8 years ago on Wednesday July 13, 2011 | Permalink
  26. freelybin
    Member

    @casey
    Instead of hiding the lat and long fields with CSS, you could set the custom fields as hidden in gravity forms.

    I'm just trying to make sense of your code for the search and drop down. A quick step by step of how to implement would be appreciated if you have the time.

    Posted 8 years ago on Thursday August 11, 2011 | Permalink
  27. freelybin
    Member

    I noticed in the most recent update of the WP-Geo plugin that this no longer was working does anyone have any idea why?

    Posted 8 years ago on Friday October 14, 2011 | Permalink
  28. Having the same problem here... I need to manually enter this for all submitted routes, which will be tedious once submissions are up! But it has so much potential that I've already a few plans to use it with GF for a few more ideas..

    I get the following error...

    Warning: Invalid argument supplied for foreach() in /home/domain/public_html/wp-content/plugins/gravity-forms-custom-post-types/gfcptaddonbase.php on line 39
    http://www.madfall.com/review-submission and a few more you can see on this page...
    If anyone has an answer, it'd be appreciated!

    Posted 8 years ago on Sunday October 16, 2011 | Permalink
  29. @walkeryri, looks like that error is from the Custom Post Types add-on for Gravity Forms, which was not created by us. You'll have to ask the plugin author for assistance.

    http://wordpress.org/extend/plugins/gravity-forms-custom-post-types/

    Posted 8 years ago on Sunday October 16, 2011 | Permalink

This topic has been resolved and has been closed to new replies.