Open Google Maps in Fancybox, and search within the Fancybox

Ok my problem is a little complicated, and I cannot provide a link so I will try my best to explain and show you my code…

What I’m trying to achieve:

I am building a site using WordPress, but the issue does not involve any WordPress specifics, which is why I have posted on SO.

I’m trying to open Fancybox when a user submits a postcode search using Google maps on my page. The Fancybox should open up displaying all results based on the postcode submitted.

The problem

I’ve been able to get the submit button to trigger Fancybox to load my inline Google Maps code (using the jquery.form.js plugin), but for some reason it is not actually displaying any results, which makes me think that it hasn’t sent the request, or it has sent the request but it is not displaying the results.

I think what I need to do is somehow tell Google Maps to load the results without leaving the page, then display the results in the Map displayed within the Fancybox.

It is worth noting that I am using the Pronamic Google Maps plugin.

I have also tested my .js files and they are all working correctly.

HTML:

<form id="event-search-form" class="googleSearch" method="get">
        <input id="lat-field" name="lat" type="hidden" />
        <input id="lng-field" name="lng" type="hidden" />

        <p>
            <label for="address-field"><?php _e('Location', 'text_domain'); ?></label>

            <input id="address-field" name="locatie" value="<?php echo $  address; ?>" type="text" />
        </p>

        <p>
            <input name="actie" type="submit" class="inlineSubmit" value="<?php _e('Search', 'text_domain'); ?>" />
        </p>
    </form>
    <div style="display:none;">
    <div id="googleMapsPop">
            <?php 

            $  fitBounds = false;

            $  address = filter_input(INPUT_GET, 'locatie', FILTER_SANITIZE_STRING);
            $  lat = filter_input(INPUT_GET, 'lat', FILTER_VALIDATE_FLOAT);
            $  lng = filter_input(INPUT_GET, 'lng', FILTER_VALIDATE_FLOAT);

            ?>
            <?php if(!empty($  address)): ?>

            <h3><?php printf(__('Events near: %s', 'text_domain'), $  address);?></h3>

            <?php endif;

            if(function_exists('pronamic_google_maps_mashup')) {
                if(!empty($  lat) && !empty($  lng)) {
                    $  latLo = $  lat - 0.25;
                    $  latHi = $  lat + 0.25;
                    $  lngLo = $  lng - 0.25;
                    $  lngHi = $  lng + 0.25;

                    $  query = new WP_Query(array(
                            'post_type' => 'events' ,
                            'posts_per_page' => -1 ,
                            'meta_query' => array(
                                array(
                                    'key' => '_pronamic_google_maps_active',
                                    'compare' => 'IN' ,
                                    'value' => array('true', true, '1')
                                ) ,
                                array(
                                    'key' => '_pronamic_google_maps_latitude',
                                    'compare' => 'BETWEEN' ,
                                    'value' => array($  latLo, $  latHi)
                                ) ,
                                array(
                                    'key' => '_pronamic_google_maps_longitude',
                                    'compare' => 'BETWEEN' ,
                                    'value' => array($  lngLo, $  lngHi)
                                )
                            )
                        )
                    );

                    if($  query->have_posts()) {
                        $  fitBounds = true;
                    } else {
                        ?>
                        <p>
                            <?php printf(__('We could not find any events near: %s', 'text_domain'), $  address); ?>
                        </p>
                        <?php
                    }
                } else {
                    $  query = array(
                        'post_type' => false
                    );
                }

                pronamic_google_maps_mashup(
                    $  query ,
                    array(
                        'width' => 700 ,
                        'height' => 500 ,
                        'fit_bounds' => $  fitBounds,
                        'marker_options' => array(
                            'icon' => 'http://google-maps-icons.googlecode.com/files/photo.png'
                            ),
                    )
                );
            }
            ?>
        </div>

Jquery:

jQuery(document).ready(function(jQuery) {
jQuery(".pgmm").bind("pronamic-google-maps-ready", function() {
    var form = jQuery("#event-search-form");

    var findLocation = function() {
        var geocoder = new google.maps.Geocoder();
        var address = jQuery("#address-field").val();

        geocoder.geocode({"address": address} , function(results, status) {
            if(status == google.maps.GeocoderStatus.OK) {
                if(results[0]) {
                    var location = results[0].geometry.location;
                    var viewport = results[0].geometry.viewport;

                    jQuery("#lat-field").val(viewport.getCenter().lat());
                    jQuery("#lng-field").val(viewport.getCenter().lng());

                    form.unbind("submit", findLocation);
                    form.submit();
                }
            }
        });

        return false;
    };

    form.submit(findLocation);
});

});

Fancybox Jquery:

jQuery(document).ready(function() {
$  ("#event-search-form, #event-search-form-inside").ajaxForm({
    success: function(responseText){
        $  .fancybox({
            'titlePosition': 'inside',
            'transitionIn' : 'elastic',
            'transitionOut' : 'elastic',
            'href'          : '#googleMapsPop'
        });
    }
});

});

newest questions tagged jquery – Stack Overflow