title: Load Google Map on button click with jQuery
body: <p>I am currently trying to change the map displayed on screen dependent on which anchor tag is clicked. The lat and long for is stored in an HTML attribute on the anchor tag called 'data-latLng' and is passed to my Javascript to then make requests to the Google API with this latLng.</p>
  
  <p>The issue I am having is that the actual map is not being displayed. The zoom bar and other features are being displayed fine. it's jsut the actual map itself.
  I have created a jFiddle to show my code.
  Am I going the correct away about this?
  Thanks</p>
  
  <p><a href="http://jsfiddle.net/fJdtY/" rel="nofollow">http://jsfiddle.net/fJdtY/</a></p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
      &lt;meta name="viewport" content="initial-scale=1.0, user-scalable=no" /&gt;
      &lt;style type="text/css"&gt;
          html { height: 100% }
          body { height: 100%; margin: 0; padding: 0 }
          #map-canvas { height: 100% }
      &lt;/style&gt;
      &lt;script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key={KEY_HIDDEN}&amp;sensor=false"&gt;
      &lt;/script&gt;       
  &lt;/head&gt;
  &lt;body&gt;
      &lt;a href="#" class="button" data-latLng="53.488188,-2.373019"&gt;Button&lt;/a&gt;
      &lt;a href="#" class="button" data-latLng="-34.397, 150.644"&gt;Button 2&lt;/a&gt;
      &lt;div id="map-canvas"&gt;&lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p></p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
  jQuery(document).ready(function() {
      jQuery(document).on("click", ".button", function(e) {
          e.preventDefault();
          var latLng = jQuery(this).attr("data-latLng");          
          initialize(latLng);
      });
  
      function initialize(latLng) {
          var mapOptions = {
              center: new google.maps.LatLng(latLng),
              zoom: 8
          };
          var map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
      }
  }); 
  </code></pre>
  
  <p></p>