title: Gmaps not working properly on js
body: <p>I've a gmap loading problem with Google JavaScript API and it does not load completely when initialized the project. I tried all of available solutions but it did not work. In addition, if reloaded or resized the page, it works. </p>
  
  <pre class="lang-js prettyprint-override"><code>    &lt;script type="text/javascript" src="http://maps.google.com/maps/api/js?key=AIzaSyDWTQpi0GTmb6hoIjbBlcGYfZLAkaDmqLI"&gt;&lt;/script&gt;
      @Scripts.Render("~/bundles/gmaps")
      &lt;script type="text/javascript"&gt;
          $(document).ready(function () {
              var map = new GMaps({
                  div: '#gmap_basic',
                  lat: 25.261502,
                  lng: 55.29155,
                  zoom: 15,
                  width: '100%',
                  height: '300px',
  
              });
              map.addMarker({
                  lat: 25.261502,
                  lng: 55.29155,
              });
          })
      &lt;/script&gt;
  </code></pre>
  
  <p><strong>Html:</strong>
      </p>
  
  <pre><code>&lt;div class="portlet-body"&gt;
      &lt;div id="gmap_basic" class="gmaps"&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  
  
  <p>Just seems top left of the page! how can I fix this problem?</p>
  
  <p><img src="https://i.stack.imgur.com/nNVfC.jpg" alt="enter image description here"></p>