title: jQuery gmap is not showing on website
body: <p>I downloaded a template that had gmap already integrated into it. All I had to do was adjust the markers so that it pointed to the right location.</p>
  
  <p>I am in the process of creating a new website, and on the contact page, I want to add the same gmap that is on the template.</p>
  
  <p>I used the same code, copied over the same files and put them in their respective directories, but I cannot get the map to show up on my page.</p>
  
  <p>In the HEAD of the HTML document, I have included this code:</p>
  
  <pre><code> &lt;script src="https://maps.googleapis.com/maps/api/js"&gt;&lt;/script&gt;
  </code></pre>
  
  <p>Further down in the BODY, I have created a SECTION tag like this:</p>
  
  <pre><code> &lt;section id="map-section"&gt;
        &lt;div id="map"&gt;&lt;/div&gt;
   &lt;/section&gt;
  </code></pre>
  
  <p>Just above the closing BODY tag, I have these pieces of Javascript:</p>
  
  <pre><code>&lt;script src="js/jquery-1.11.0.js"&gt;&lt;/script&gt;
  &lt;script src="js/bootstrap.min.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="js/jquery.gmap.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript"&gt;
    jQuery(document).ready(function() {
      jQuery('#map').gMap(
        {
          latitude: 50.000000,
          longitude: 50.000000,
          html: "My Location",
          popup: true,
          panControl: true,
          zoomControl: true,
          zoomControlOptions:
          {
            style: google.maps.ZoomControlStyle.SMALL
          },
          mapTypeControl: true,
          scaleControl: true,
          streetViewControl: false,
          overviewMapControl: true,
          scrollwheel: true,
          icon:
          {
            image: "http://www.google.com/mapfiles/marker.png",
            shadow: "http://www.google.com/mapfiles/shadow50.png",
            iconsize: [20, 34],
            shadowsize: [37, 34],
            iconanchor: [9, 34],
            shadowanchor: [19, 34]
          },
          zoom:15,
          markers: [{
            latitude: 50.000000,
            longitude: 50.000000
          }]
        });
      });
   &lt;/script&gt;
  </code></pre>
  
  <p>Also, in my CSS, I have the MAP-SECTION looking like this:</p>
  
  <pre><code>#map-section {
    bottom: 0px;
    padding: 0px;
    height: 250px;
    width: 100%;
    z-index: 0;
    border: 1px solid red;
  }
  #map{
    display: block;
    height: 250px;
    width: 100%;
    min-width: 100%;
    max-width:1350px;
    margin-left:auto;
    margin-right:auto;
  }
  </code></pre>
  
  <p>If you notice in the CSS, in the <code>#map-section</code>, I have included a red border which does show on the screen. It's just not showing the map.</p>
  
  <p>Can anyone see what I am missing?</p>
  
  <p>Please help.</p>