My WP Geo mashup

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 !

Cool. Thanks!

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.

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

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 ?

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

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!

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

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.

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.

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!

@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

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

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