title: Wordpress modal window to show Google maps
body: <p>I am following the steps given here <a href="http://wordpressthemescollection.com/simple-modal-google-map-easy-modal-map-boxes-with-jquery-752.html" rel="nofollow">http://wordpressthemescollection.com/simple-modal-google-map-easy-modal-map-boxes-with-jquery-752.html</a> to display a Google map in a lightbox like window in a Wordpress site. </p>
  
  <p>But the code doesn't work. Checking Firebug gives an error "jQuery.modal() is not a function"</p>
  
  <p>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</p>
  
  <pre><code>&lt;a href="http://maps.google.com.." class="map"&gt;Show map&lt;/a&gt;
  
  ....//some more code
  
  jQuery(document).ready(function () {
      jQuery('.map').click(function (e) {
          jQuery.modal('&lt;iframe src="'+this.href+'&amp;output=embed"&gt;&lt;/iframe&gt;&lt;p class="larger"&gt;&lt;a target="_blank" href="'+this.href+'"&gt;View larger&lt;/a&gt;&lt;/p&gt;');
          return false;
      });
  });
  </code></pre>
  
  <p>I have a sneaking suspicion that <code>jQuery.modal(....</code> needs to be changed to <code>jQuery('#someid').modal()</code> but not sure how to go about it.</p>
  
  <p>Please can someone shed some light on whats going wrong here.</p>
  
  <p>Many thanks</p>
  
  <p>EDIT: As I mentioned I have already loaded the required scripts in the themes header.php</p>
  
  <pre><code>&lt;script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js" type="text/javascript"&gt;&lt;/script&gt;
  &lt;script src="/wp-content/themes/thename/js/jquery.simplemodal.1.4.1.min.js" type="text/javascript"&gt;&lt;/script&gt;
  </code></pre>