Question

I am following the steps given here http://wordpressthemescollection.com/simple-modal-google-map-easy-modal-map-boxes-with-jquery-752.html to display a Google map in a lightbox like window in a WordPress site.

But the code doesn’t work. Checking Firebug gives an error “jQuery.modal() is not a function”

I have made sure that the jQuery and Simple Modal scripts are loaded and in the page where I want to display the map I include the jQuery code

<a href="http://maps.google.com.." class="map">Show map</a>

....//some more code

jQuery(document).ready(function () {
    jQuery('.map').click(function (e) {
        jQuery.modal('<iframe src="'+this.href+'&output=embed"></iframe><p class="larger"><a target="_blank" href="'+this.href+'">View larger</a></p>');
        return false;
    });
});

I have a sneaking suspicion that jQuery.modal(.... needs to be changed to jQuery('#someid').modal() but not sure how to go about it.

Please can someone shed some light on whats going wrong here.

Many thanks

EDIT: As I mentioned I have already loaded the required scripts in the themes header.php

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js" type="text/javascript"></script>
<script src="/wp-content/themes/thename/js/jquery.simplemodal.1.4.1.min.js" type="text/javascript"></script>

Answer 1

Seems that the jQuery Simple Modal plugin is not properly installed. Have you included its js file in your document?

Marco