title: Load Javascript on page inside Div using jQuery load()
body: <p>I have this page that uses Google Maps Javascript API (extPage.php):</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
  
  &lt;head&gt;
  
  &lt;meta name="viewport" content="initial-scale=1.0, user-scalable=no"&gt;
  &lt;meta charset="utf-8"&gt;
  
  &lt;script src="https://maps.googleapis.com/maps/api/js?v=3.exp&amp;sensor=false"&gt;&lt;/script&gt;
  
  &lt;script&gt;
  
  
  function initialize() {
  
      var cord = new google.maps.LatLng(28.545078,-81.377196);
  
      var mapOptions = {
          zoom: 15,
          center: cord,
          mapTypeId: google.maps.MapTypeId.ROADMAP
      };
  
      var map = new google.maps.Map(document.getElementById('map-canvas'),
                mapOptions);
  
  }
  
  google.maps.event.addDomListener(window, 'load', initialize);
  
  
  &lt;/script&gt;
  
  &lt;/head&gt;
  
  &lt;body&gt;
  
  &lt;div id="map-canvas"style="width:600px; height:500px"&gt;&lt;/div&gt;
  
  &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>
  
  <p>That page loads fine as is but I am trying to load into a div on another page. I am doing it like this (test.php):</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
  
  &lt;head&gt;
  
  &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt;
  
  &lt;script src="http://code.jquery.com/jquery-1.9.1.min.js"&gt;&lt;/script&gt;
  
  &lt;script type="text/javascript"&gt;
  
  
      $(document).ready(function() {
  
          $("#LoadBut").click(function() {
  
              $("#extDiv").load('extPage.php');
  
          });
  
      });
  
  
  &lt;/script&gt;
  
  &lt;/head&gt;
  
  
  &lt;body&gt;
  
  &lt;input type="button" id="LoadBut" value="Load"&gt;
  
  &lt;div id="extDiv"&gt;&lt;/div&gt;
  
  
  &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>
  
  <p>When I run it just like this I get an error <code>ReferenceError: google is not defined</code>. I've tried moving the <code>&lt;script src="https://maps.googleapis.com/maps/api/js?v=3.exp&amp;sensor=false"&gt;&lt;/script&gt;</code> to the test.php page. The error message goes away but the map does not load.</p>
  
  <p>I've never been to sure about the best way to handle Javascript on a page inside of a div like this.</p>
  
  <p>Any help with this would be great.</p>
  
  <p>Thanks!</p>